HTML-这些图像没有响应它们的onclick？-堆栈溢出

顺晟科技

2022-10-19 13:46:36

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

但我的问题是，当我运行这段代码时，两个“人”图像都不能点击...或者反应灵敏。我尝试使用一个简单的警报消息查看--仍然没有。因此图像在单击时不会执行任何操作。

<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>

顺晟科技：

这里发生了一些不同的事情来使其工作:

你需要访问随机数才能传递到多个函数中，所以我把它移出并放在里面。如果不想将其移出，则需要在函数范围之外声明，以便在该函数之外可以访问它。
因为您正在生成num并将其传递到这两个函数中，所以也可以将num传递到数组中，例如:
正如您所提到的，添加警报（或在浏览器控制台日志中使用console.logs）可以帮助您查看代码失败的位置。
JavaScript数组索引是基于0的，使用would检索第一个图像，并将检索第二个图像。这就是为什么我在这里使用：。您正在生成1或2，但您想要0或1。https://developer.mozilla.org/en-us/docs/web/javascript/guide/indexed_collections#condermining_lengt

上一篇：HTML-是否可以创建多行<abbr 下一篇：JavaScript--有可能让转换

网站建设

Html

HTML-这些图像没有响应它们的onclick？-堆栈溢出