Question

我正在做一个小项目。该项目：创建一个按钮（按下时，数字加1）。我的问题是，当我刷新页面时，当前数字将重新变为0。该网站是否有办法修改当前数字？这是我制作的代码（按钮起作用。（不包括css文件。））：

<head>
    <title>Clicker</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <script type="text/javascript">

    var clicks = 0; 
    function clickME() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks; 
 }
    </script>
    <button class="button" type="button" onclick="clickME()">Click me</button>
    <p class="number"><a id="clicks">0</a></p>

</body></html>

Answer 1

您需要存储在本地存储中，脚本代码也应放在正文之后，因为一旦执行dom操作，加载dom时，仅会触发使用javascript进行dom的操作。否则，dom元素要等到加载后，当您访问尚未加载的 id 时，它将引发错误。

我希望下面的代码能解决这个问题。

注意：Local Storage

<head>
    <title>Clicker</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

    <button class="button" type="button" onclick="clickME()">Click me</button>
    <p class="number"><a id="clicks">0</a></p>

</body>
<script type="text/javascript">

    function clickME() {
        let clicks = Number(localStorage.getItem("counts") || 0)
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
        localStorage.setItem("counts", clicks)
    }
    document.getElementById('clicks').innerHTML = localStorage.getItem("counts") || 0


</script>

</html>

刷新页面时如何保持当前号码

1 个答案: