Question

这是我的脚本，我试图按一个按钮随机化图像，而不是我必须按下刷新按钮。我需要对按钮进行编码才能使其正常工作？我的代码我觉得我对我的函数名称感到困惑？我有很多帮助创建这个，所以我对按钮是做什么有点迷茫。我已经创建了一个按钮，我已经尝试为＆＃34; onclick＆＃34;插入多个内容。但没有任何作用。

<!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>

Answer 1

只需添加：

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

并点击按钮添加：

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

EDIT 要替换现有图像：

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]);
     }
   }
 }

添加这些功能。

致JavaScript: remove element by id

的信用

此外，在函数中不需要JQuery，因此JQuery标记是无用的。

Answer 2

你也可以使用类似的东西（只要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();

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

需要帮助创建一个按钮来激活javascript函数

2 个答案: