javascript - 如何更改具有递增值的 HTML 元素？

Question

当我进入页面时，我一开始就有 0 个 cookie。我做了一个 if 语句，表示如果 cookie 少于 10 个，则隐藏升级按钮。我单击并将该值增加 1。当我达到 10 个 cookie 时，如何显示升级按钮？是用事件监听器还是什么？

var cookies = 0;
var cookieClick = 1;

function getCookie() {
    cookies += cookieClick;
    document.getElementById('cookieCount').innerHTML = cookies;
    document.getElementById('img').style.visibility = 'visible';
}

if (cookies < 10) {
    document.getElementById('up').style.visibility = 'hidden';
}

function upgrade() {
    cookieClick *= 2;
    document.getElementById('up').style.visibility = 'hidden';
    alert('You have x2 the clicks!')
}

Answer 1

您的if (cookies < 10) {不是任何函数的一部分，因此它只会在页面加载时运行一次。您可能想将其包含在 getCookie() 函数中，并带有 else需要时显示升级按钮。

function getCookie() {
    cookies += cookieClick;
    document.getElementById('cookieCount').innerHTML = cookies;
    document.getElementById('img').style.visibility = 'visible';
    if (cookies < 10) {
        document.getElementById('up').style.visibility = 'hidden';
    } else {
        document.getElementById('up').style.visibility = 'visible';
    }
}

(但是如果 cookie 值永远不会减少，您可以通过加载最初隐藏元素的页面并仅检查 cookies > 10 来显示它来简化这一点。)