Question

我希望制作一个执行JavaScript函数的html按钮来改变背景颜色。

以下是我的代码：

<button onclick = "backgroundChange()">Press Me</button>

document.body.style.backgroundColor = "white";

function backgroundChange () {
    if (document.body.style.backgroundColor = "white") {
        document.body.style.backgroundColor = "red";    
    }
    else if (document.body.style.backgroundColor = "red") {
        document.body.style.backgroundColor = "white";  
    }

}

我做错了什么男孩？

Answer 1

使用相等（==）而不是赋值（=）operator.document进行适当的比较。

document.body.style.backgroundColor = "white";
var btn = document.querySelector('button');//it selects your button element you can also select using id,class,..
btn.onclick = function() //handles the click event
{

    if (document.body.style.backgroundColor == "white") {
        document.body.style.backgroundColor = "red";    
    }
    else if(document.body.style.backgroundColor == "red") {
        document.body.style.backgroundColor = "white";  
    }

}

<button onclick = "backgroundChange()">Press Me</button>

Answer 2

另一种方法是不使用if语句。您可以在每次单击时增加按钮的计数，然后使用模数运算符根据按钮的值确定数组中的颜色。

function backgroundChange (index) {
  var colors= ["white","red"];
  document.body.style.backgroundColor = colors[index %2];
  document.getElementById('changeButton').value = parseInt(index)+1;
  }

<button id="changeButton" onclick = "backgroundChange(this.value)" value="1">Press Me</button>

Answer 3

如果您想比较任何内容，请始终使用==代替=。

试试这个：

if (document.body.style.backgroundColor == "white") {
    document.body.style.backgroundColor = "red";    
}
else if (document.body.style.backgroundColor == "red") {
    document.body.style.backgroundColor = "white";  
}

带有JavaScript功能的HTML按钮，用于更改BG颜色

3 个答案: