为什么我的可点击图像不起作用

Why does my clickable image not work?

本文关键字：图像 不起作用 我的 为什么      更新时间：2023-09-26

我正在尝试制作一个版本的饼干点击器来练习制作游戏，但重要的部分不起作用：当您单击cookie时，没有任何反应？

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script language="javascript">
    </script>
</head>
<body>
    <div id="cookie" style="cursor:pointer"><img src="http://img1.wikia.nocookie.net/__cb20130827014912/cookieclicker/images/thumb/5/5a/PerfectCookie.png/250px-PerfectCookie.png"></div>
    <div>
    <script language="javascript">
        //variables:
        var cookieClicks = 0;
        var cookieClicked;
        //code:
        var cookie = document.getElementById("cookie").onclick = cookieClicked(){
            return true;
        };         // gets the element
        //checks if cookie is clicked + add cookie
        if(cookieClicked === true){
            cookieClicks ++;
        }
        document.write(cookieClicks + " Cookies");
    </script>
    </div>
</body>
</html>

您当前正在执行的操作不是处理div 单击事件的正确方法。假设您要递增cookieClicks并在每次单击div 时显示 cookieClicks 后跟 " Cookies" 的值，请将脚本更改为

<script language="javascript">
    //variables:
    var cookieClicks = 0;
    function cookieClicked() {
        cookieClicks++;
        alert(cookieClicks + " Cookies");
    }
</script>

并将onclick="cookieClicked();"添加到cookiediv

<div id="cookie" style="cursor:pointer" onclick="cookieClicked();"><img     src="http://img1.wikia.nocookie.net/__cb20130827014912/cookieclicker/images/thumb/5/5a/PerfectCookie.png/250px-PerfectCookie.png"></div>

工作演示：http://jsfiddle.net/p87zks60/

每当用户单击图像时，onclick事件处理程序（cookieClicked）中的代码就会执行。所以你应该在事件处理程序中完成这项工作，而且你应该在事件处理程序的名称之前使用function，如果你使用function，这个名称是可选的 

var cookieClicks = 0;    
var cookie = document.getElementById("cookie").onclick = function cookieClicked()
{
       cookieClicks ++;
 };         // gets the element

可以试试这个：

 
    
    var cookieClicks = 0;
    
    function cookieClicked() {
       
       document.getElementById("count").innerHTML= ++cookieClicks + " Cookies";
    }
   
 <!DOCTYPE html>
    <html>
    <head>
    <link rel='stylesheet' href='style.css'/>
    <script language="javascript">
    
    </script>
    </head>
    <body>
    <div id="cookie" style="cursor:pointer" onclick="cookieClicked()"><img     src="http://img1.wikia.nocookie.net/__cb20130827014912/cookieclicker/images/thumb/5/5a/PerfectCookie.png/250px-PerfectCookie.png"></div>
    <div>
    <p id="count"></p>
   
    </div>
    </body>
    </html>

相关文章：