时间戳

首页 > 解决方案 > 这些图像没有响应他们的点击？

html - 这些图像没有响应他们的点击？

问题描述

我有点新鲜，为学校做一项任务，我必须让这些“person1 和 person2”图像显示从 2 个 onclick 中选择的随机图像——.. 我想要它，这样哪个并不重要您单击一个，它只会运行一个生成随机图像的脚本。

但我的问题是当我运行此代码时，“人”图像都不可点击......或响应。我尝试使用一个简单的警报消息来查看 - 仍然注意到。所以图像在点击时没有做任何事情。

<body>
    <h3>Click the person you think has a cat!</h3>
    <img id="check-person1-img" src="images/person1.jpg">
    <img id="check-person2-img" src="images/person2.jpg">
    <div id="output-div"></div>
        
        <script type="text/javascript">

            var checkPerson1 = document.getElementById("check-person1-img");
            var checkPerson2 = document.getElementById("check-person2-img");
            var outputDiv = document.getElementById("output-div");
            var heading = document.getElementById("heading-h1");
            var image = [`<img src="/images/cat.jpg">`, `<img src="/images/frog.jpg">`];
                
                function generateRandomImage(){
                    var num = Math.floor( Math.random() * 2 + 1);
                    var img = image[num];
                }

                function displayRandomImage(){
                    if ( num === 1 ){
                        outputDiv.innerHTML = image[1];
                    }
                        else if ( num === 2 ){
                            outputDiv.innerHTML = image[2];
                        } 
                }

                function bothFunctions(){
                    generateRandomImage;
                    displayRandomImage;
                }

            checkPerson1.onclick = bothFunctions;
            checkPerson2.onclick = bothFunctions;

        </script>
</body>

标签： htmlscript

解决方案

这里发生了一些不同的事情来使它起作用：

  • 您需要访问随机数num才能传递给多个函数，因此我将其移出generateRandomImage()并将其放入bothFunctions(). 如果您不想将其移出generateRandomImage()，则需要num在函数范围之外声明，以便可以在该函数之外访问它。
  • 因为您正在生成num并将其传递给两个函数，displayRandomImage(num)所以也可以将 num 传递给image[num]数组，例如：outputDiv.innerHTML = image[num];
  • 就像您提到的那样，添加警报（或在浏览器控制台日志中使用 console.logs）可以帮助您查看代码失败的地方。
  • JavaScript 数组索引是从 0 开始的，使用image[0]将检索第一个图像，并image[1]检索第二个图像。这就是我在-1这里使用的原因：var num = (Math.floor( Math.random() * 2) + 1) - 1;. 您正在生成 1 或 2，但您想要 0 或 1。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#understanding_length

var checkPerson1 = document.getElementById("check-person1-img");
var checkPerson2 = document.getElementById("check-person2-img");
var outputDiv = document.getElementById("output-div");
var heading = document.getElementById("heading-h1");
var image = [`<img src="/images/cat.jpg">`, `<img src="/images/frog.jpg">`];

checkPerson1.onclick = bothFunctions;
checkPerson2.onclick = bothFunctions;

function generateRandomImage(num){
    // alert('random number is:'+num);
    
    var img = image[num];
    // alert('image will be:'+img);
    
    //alert('Generate Random Image done');
}
function displayRandomImage(num){
    //alert(num);
    
    if ( num === 0 ){
        alert('First image');
    }
    else if ( num === 1 ){
        alert('Second Image');
    } 
    outputDiv.innerHTML = image[num];
}

function bothFunctions(){
    var num = (Math.floor( Math.random() * 2) + 1) - 1;
    generateRandomImage(num);
    displayRandomImage(num);
}
<h3>Click the person you think has a cat!</h3>
<img id="check-person1-img" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50">
<img id="check-person2-img" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50">
<div id="output-div"></div>

推荐阅读