如何更改具有递增值的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来显示它，从而稍微简化一下。）

Answer 2

是的，一个onClick事件监听器可以检查您当前的cookie计数并切换您的升级按钮以显示可见性。

Answer 3

<button onclick="incrementCount()"> b1 </button>
<button id="b2" style="visibility:hidden" onclick="something()">b2</button>

<script>
var cookies = 0;
var cookieClick = 0;

function incrementCount(){
  cookieClick = cookieClick + 1;
  console.log(cookieClick)
  if(cookieClick == 10){  
  document.getElementById('b2').style.visibility = "visible"
 }
}

function something(){
 alert('i work')
}
</script>

您可以尝试这段简单的代码。