需要幫助來創建按鈕來激活javascript功能

Question

這是我的腳本，我嘗試使按鈕隨機化圖像，而不必按下刷新按鈕。 我到底需要對按鈕進行編碼才能使其正常工作？ 我的代碼對函數名是什么感到困惑？ 我在創建此控件方面有很多幫助，因此對於該按鈕，我有點迷失了。 我創建了一個按鈕，並嘗試為“ onclick”插入多個內容，但沒有任何效果。

<!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()">

編輯替換現有圖像：

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：按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 個解決方案

解決方案1
0 已采納 2014-11-12 11:44:07

解決方案2
0 2014-11-12 11:51:09

需要幫助來創建按鈕來激活javascript功能

問題描述

2 個解決方案

解決方案1 0 已采納 2014-11-12 11:44:07

解決方案2 0 2014-11-12 11:51:09

解決方案1
0 已采納 2014-11-12 11:44:07

解決方案2
0 2014-11-12 11:51:09