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" NOT class="U1"。这意味着将CSS选择器更改为#U1。

Answer 2

更改您的HTML：

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

AND CSS：

#U1 {
   visibility: hidden;
}

这是因为你正在使用getElementById（）;和你的按钮只按类命名，而不是ID。

Answer 3

我个人会这样做：

<强> FIDDLE

<强> HTML

<button id="U1" onclick="SuperPlant()" style="visibility: hidden">Super Beans</button>

<强> JAVASCRIPT

var coffee = 5;

function showButton() {

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

}

window.setInterval(showButton, 500);

我建议您使用setInterval中的匿名函数，因为它可能很难排除故障。

希望这有助于。

使用JS更改按钮css

3 个答案: