Javascript，cookie点击器计数器未更新答案

【问题标题】：Javascript, cookie clicker counter not updatingJavascript，cookie点击器计数器未更新
【发布时间】：2020-04-23 09:07:14
【问题描述】：

我刚开始学习 js，我正在尝试制作一个基本的 cookie 点击器，但我就是不明白为什么页面上的计数器没有更新。

<body>

    <div id="header">COOKIE CLICKER</div>
        <div id="container">
            <div id="counter">
                <div id="countertext">
                    <a id="cookieCount">0 Cookies</a>
                </div>
            </div>
            <div id="cookie">
                <a href>
                    <img id="cookieImage" src="images\cookie.png">
                </a>
            </div>
            <div id="upgrade">UPGRADE</div>
        </div>

</body>
<script src="cookie.js"></script> 
</html>

var cookieCount = document.getElementById('cookieCount');
var cookieCount = 0;
var cookieImage = document.getElementById('cookieImage');

// cookieImage.addEventListener('click', oneClick);



cookieImage.onClick = function() {
    cookieCount++;
    cookieCount.innerHTML = cookieCount + "Cookies";
};

【问题讨论】：

标签： javascript html counter

【解决方案1】：

首先，您的 HTML 文档应该有一个 <html> 打开标签。我创建了一个适合我的示例，并用按钮替换了图像以进行演示。

index.html 文件：

<html>                                                                                  
<body>                                                                                  
    <div id="header">COOKIE CLICKER</div>                                               
        <div id="container">                                                            
            <div id="counter">                                                          
                <div id="countertext">                                                  
                    <a id="cookieCount">0 Cookies</a>                                   
                </div>                                                                  
            </div>                                                                      
            <button id="cookieImage">                                                   
                Click                                                                   
            </button>                                                                   
            <div id="upgrade">UPGRADE</div>                                             
        </div>                                                                          
</body>                                                                                 
<script src="cookie.js"></script>-                                                      
</html>

cookie.js 文件：

var cookieCount = document.getElementById('cookieCount');                               
var count = 0;                                                                          
var cookieImage = document.getElementById('cookieImage');                               


function onClick() {                                                                  
    count++;                                                                            
    cookieCount.innerHTML = count + " Cookies";                                         
};                                                                                      

cookieImage.addEventListener('click', onClick);

您的cookie.js 中的问题是您使用了两次cookieCount 变量。

【讨论】：

谢谢！我有一个打开的标记，但我没有费心包含所有的 html 信息，我确信那里没有问题。并且该js代码添加到计数器但在一帧后重置，我如何让它留在屏幕上？
我不完全确定帧后的意思，但如果您的意思是要在重新加载页面后保持计数，您可以使用本地存储或 cookie。您可以在此处找到有关如何使用本地存储的教程：w3schools.com/html/html5_webstorage.asp