Question

           function up(){

            var myShapes= new Array();

            myShapes[0]="<img src='et.png' width='150'/>"
            myShapes[1]="<img src='bulb.png' width='150'/>"
            myShapes[2]="<img src='raind.png' width='150'/>"


            var woe=Math.floor(Math.random() * 3);

            document.write(myShapes[woe])

             }
             up()

我是一个新手充其量我想用图像作为按钮每次点击图片随机变成不同的图片。如果我刷新页面，每次都会出现一个不同的图像，所以我知道我在正确的轨道上，我只需要帮助使图像被按下时工作，而不仅仅是刷新页面时。谢谢！

Answer 1

1：在每次评估函数时都不需要分配和填充图像数组myShapes，因为它对所有评估都是常量。换句话说，我们可以在页面加载期间将其定义为一个全局变量，并将其作为封闭变量从closure内部访问。

2：最好只在myShapes中定义图片的网址，而不是<img>标记的完整HTML。然后，我们可以从所选数组元素中设置src标记的<img>属性，而不是编写动态HTML。这意味着我们需要在页面加载完成后使用onload处理程序调用该函数;这是确保在JavaScript函数运行时处理<img>元素所必需的。这通常是生成动态内容的方式，因此最好不要在页面加载期间进行document.write()调用。

3：要在图片上点击更改图片，我们需要在图像元素中添加一个onclick处理程序来调用该函数。

var myShapes = [
    'https://www.gravatar.com/avatar/e8f9bc86c31c62823171c2c83c249526?s=328&d=identicon&r=PG&f=1',
    'https://www.gravatar.com/avatar/4fa45261dec56004145c653832504920?s=328&d=identicon&r=PG&f=1',
    'https://www.gravatar.com/avatar/fa7fe8a1a8d8f84ef89a80c783bcd9e7?s=328&d=identicon&r=PG&f=1',
];

function setRandomImage() {
    var imgElem = document.getElementById('img1');
    imgElem.setAttribute('src',myShapes[Math.floor(Math.random()*3)]);
} // end setRandomImage()

<body onload="setRandomImage();">
  <img id="img1" width="150" onclick="setRandomImage();"/>
</body>

我如何使用onclick功能来更改图像javascript？

1 个答案: