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

Question

我在 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;
}

Answer 1

如果你的函数没有被调用过一次，这个变量的值必须是null或undefined，你可以用一个“if”来处理这种情况，在输出中加上0，当刷新页面，因为点击后变量将有价值。我说得对吗？

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

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

Answer 2

如果 localStorage.clicks 还未定义，您可以将其初始化为 0。

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

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

function clickCounter() {
    localStorage.clicks++;
    output.innerHTML = localStorage.clicks;
}


function resetClicks() {
...