Question

使用 JS 更改按钮 CSS

2015-01-31

76

javascript html css

我有一个隐藏按钮，我想在用户喝了 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 。

Answer 2

我个人会按如下方式操作：

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 中使用匿名函数，因为它很难进行故障排除。

希望这对您有所帮助。

Answer 3

更改您的 HTML：

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

和 CSS：

#U1 {
   visibility: hidden;
}

这是因为您正在使用 getElementById(); 并且您的按钮仅按类命名，而不是 ID。