Question

不可否认我是javascript的新手，我认为我想要做的很简单，但是我很难找到如何通过点击按钮而不是页面加载来使这个功能工作重装。

<script type="text/javascript">
    <!--
    var ic = 9; // Number of alternative images
    var xoxo = new Array(ic); // Array to hold filenames

    xoxo[0] = "images/StaminUp.png"
    xoxo[1] = "images/DoubleTap.png"
    xoxo[2] = "images/QucikRevive.png"
    xoxo[3] = "images/ElectricCherry.png"
    xoxo[4] = "images/Juggernog.png"
    xoxo[5] = "images/SpeedCola.png"
    xoxo[6] = "images/MuleKick.png"
    xoxo[7] = "images/WidowsWine.png"
    xoxo[8] = "images/DeadShot.png"

    function pickRandom() {
        if (Math.random)
            return [Math.floor(Math.random() * xoxo.length)];
        else {
            var now = new Date();
            return (now.getTime() / 1000) % xoxo.length;
        }
    }
    // Write out an IMG tag, using a randomly-chosen image name.
    var choice = pickRandom(ic);
    // -->
    
    </script>

<html>
<head>

</head>
<body>
<p id="perk"></p>
<script>document.getElementById("perk").innerHTML = ('<img src= "'+xoxo[choice]+'">')</script>
</body> 
</html>

Answer 1

因此，您只需创建一个ID如下的按钮：

<button id="changeImage">Change Image</button>

现在您向其添加一个事件监听器，如果有人点击该按钮，将会触发该监听器。事件监听器将调用一个函数，因此我建议将图像更改交换为自己的函数。

    function changeImage() {
       document.getElementById("perk").innerHTML = ('<img src= "'+xoxo[pickRandom(ic)]+'">');
    }

这个函数你在开始时调用一次：

changeImage();

此函数将作为参数传递给事件侦听器：

document.getElementById("changeImage").addEventListener('click', changeImage);

看看这个小提琴： https://jsfiddle.net/u0jw8u11/

需要此if / else语句才能通过按钮的单击操作来运行

1 个答案: