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

标签 javascript css html image

我正在尝试制作一个 cookie clicker 版本来练习制作游戏,但重要的部分不起作用:当您单击 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();"添加到cookie div

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

关于javascript - 为什么我的可点击图像不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27201887/

相关文章:

c# - ascx 中的悬停表

javascript - 选项卡 View 不起作用

javascript - 编写 javascript 时经典 ASP 中的跨站点脚本

javascript - 使用javascript动态刷新图像时的内存泄漏

javascript - 仅当我从主页启动流程时组件才会呈现

html - Polymer 1.0 app路由,在div内加载外部页面

javascript - 修改 autoscroll &lt;input&gt; 必需属性 HTML

javascript - 为什么这个焦点事件不会触发

c# - 将 session 变量转换为 html

javascript - Kendo图表使用javascript删除属性