时间戳

首页 > 解决方案 > 如何在 JavaScript 中按下按钮之前输出 0 次点击？（点击计数器）

javascript - 如何在 JavaScript 中按下按钮之前输出 0 次点击？（点击计数器）

问题描述

我在 JavaScript 中做了一个点击计数器，现在我想解决这个问题：

当我打开点击计数器时，输出什么都没有。但按下“点击”按钮后，输出为1. 我想0在打开点击计数器后将输出更改为。但这里有另一个问题。之后，0重新加载页面后将始终输出。

这是我的点击计数器的代码：

document.title = 'Click Counter';

var clickButton = document.createElement('button');
var resetButton = document.createElement('button');
var output = document.createElement('p');

clickButton.innerHTML = 'Click';
resetButton.innerHTML = 'Reset';

clickButton.onclick = clickCounter;
resetButton.onclick = resetClicks;

document.body.appendChild(clickButton);
document.body.appendChild(resetButton);
document.body.appendChild(output);

function clickCounter() {
    if (localStorage.clicks) {
        localStorage.clicks = Number(localStorage.clicks) + 1;
    } else {
        localStorage.clicks = 1;
    }
    output.innerHTML = localStorage.clicks;
}

function resetClicks() {
    localStorage.clear();
    output.innerHTML = 0;
}

标签： javascriptlocal-storage

解决方案

如果你的函数没有被调用过一次，这个变量的值必须是 null 或 undefined，你可以用“if”来处理这种情况，在输出中添加 0，刷新页面时不会出现问题，因为单击后，变量将具有值。我对吗？

if (!localStorage.clicks){
    localStorage.clicks = 0;
}

另一个提示，尝试在打开计数器时获取事件并设置此事件下的值。

推荐阅读