javascript - 使用 JS 更改按钮 css

Question

我有一个隐藏按钮，我想在用户喝 5 杯咖啡时显示这是我的代码，但它似乎不起作用

JS

window.setInterval(function(){

                   if (coffee == 5) {
                   document.getElementById("U1").style.visibility = "visible";
                   console.log()
                   }

                   }, 500);

HTML

<button class="U1" onclick="SuperPlant()"> Super Beans</button><br>

CSS

.U1 {
visibility: hidden;
}

控制台错误

TypeError: null is not an object (evaluating 'document.getElementById("U1").style')

Answer 1

您需要在 setInterval() 命令两边加上引号，它不需要在函数内部。像这样:

window.setInterval("if (coffee == 5) { document.getElementById('U1').style.visibility = 'visible'; console.log() }", 500);

不是这个:

window.setInterval(function() {if (coffee == 5) { document.getElementById("U1").style.visibility = "visible"; console.log() } }, 500);

此外，您的按钮应该有 id="U1" 而不是 class="U1"。这意味着将 CSS 选择器更改为 #U1。