需要帮助创建按钮以激活 JavaScript 函数

Need help creating a button to activate a javascript function

本文关键字：激活 JavaScript 函数 按钮 帮助 创建      更新时间：2023-09-26

这是我的脚本，我正在尝试使按钮随机化图像，而不必按刷新按钮。我到底需要什么来编码按钮才能使其工作？我的代码我想我对我的函数名称感到困惑？我在创建这个时得到了很多帮助，所以我对按钮来说该怎么做有点迷茫。我创建了一个按钮，并尝试为"点击"插入多个东西，但没有任何效果。

<!doctype html>
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array() 
theImages[0] = '<img class="atvi-image-image" alt=""src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png" title="" height="467" width="675">'
theImages[1] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png" title="" height="732" width="1084">'
theImages[2] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-extra-slots.png" title="" height="480" width="752">'
theImages[3] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-2025.png" title="" height="412" width="683">'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
(function () {
    var theImages = [{
        src: "winry doe.gif",
            width: "480",
            height: "270"
    }, {
        src: "WINRY WINK.gif",
        width: "500",
        height: "484"
    }, {
        src: "winry getting hugged.gif",
        width: "500",
        height: "205"
    },
        {
         src: "winry getting mad.gif",
         width: "500",
         height: "292"

    }];
    var preBuffer = [];
    for (var i = 0, j = theImages.length; i < j; i++) {
        preBuffer[i] = new Image();
        preBuffer[i].src = theImages[i].src;
        preBuffer[i].width = theImages[i].width;
        preBuffer[i].height = theImages[i].height;
    }
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    window.getRandomImage = function () {
        var whichImage = getRandomInt(0, preBuffer.length - 1);
        return preBuffer[whichImage];
    }
})();
window.onload = function () {
    var newImage = getRandomImage();
    console.log(newImage);
    document.body.appendChild(newImage);
};
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
<form>
<input type="button" value="More Winry" onclick="">
</form>
</body>
</html>

只需添加：

function randomImage() {
var newImage = getRandomImage();
console.log(newImage);
document.body.appendChild(newImage);
};

和按钮点击添加：

<input type="button" value="More Winry" onclick="randomImage()">

编辑要替换现有映像：

function randomImage() {
 var newImage = getRandomImage();
 console.log(newImage);
 var img = document.getElementsByTagName('img').remove();
 document.body.appendChild(newImage);
};
Element.prototype.remove = function() {
 this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for(var i = 0, len = this.length; i < len; i++) {
     if(this[i] && this[i].parentElement) {
        this[i].parentElement.removeChild(this[i]);
     }
   }
 }

请改为添加这些函数。

Credits to JavaScript： remove element by id

此外，函数中不需要JQuery

，因此JQuery标签是无用的。

你也可以使用类似的方法（只要img有那个类）。使用Edan Feiles描述的原型方法

回答

按钮 HTML：

<form>
   <input id="imageButton" type="button" value="More Winry" />
</form>

和JS：

var button = document.getElementById("imageButton");
button.onclick = function() {
    var newImage = getRandomImage();
    console.log(newImage);
    document.getElementsByClassName("atvi-image-image").remove();
    document.body.appendChild(newImage);
};

或者你可以使用 Edan Feiles 所说的，只需将这一行添加到函数中：

document.getElementsByClassName("atvi-image-image").remove();

在添加新的随机图像之前。

相关文章：