这些图像没有响应他们的点击？答案

【问题标题】：These images are not responding to their onclick?这些图像没有响应他们的点击？
【发布时间】：2021-10-02 02:01:55
【问题描述】：

我有点新鲜，正在为学校做一项任务，我必须让这些“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>

【问题讨论】：

这里还缺少括号 generateRandomImage() 和 displayRandomImage()

标签： html script

【解决方案1】：

为了让它发挥作用，这里发生了一些不同的事情：

您需要访问随机数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>

【讨论】：