How to change div background color on button click?

问题

I can change the background color Red, Blue, as well as Green, but when I click the Reset button I get an error in Chrome(browser):

btnReset is not a function,

How to make all div blank when I click Reset button?

function btnRed() {
  document.getElementById("Div1").style.backgroundColor="Red";
}
function btnGreen() {
  document.getElementById("Div2").style.backgroundColor="Green";
}
function btnBlue() {
  document.getElementById("Div3").style.backgroundColor="Blue";
}
function btnReset() {
  document.getElementById("Div1").style.backgroundColor="Black";
  document.getElementById("Div2").style.backgroundColor="white";
  document.getElementById("Div3").style.backgroundColor="white";
}

#Div1
{ 
  z-index: -2;
  border: 1px solid black;
  height: 300px;
  width: 400px;
}
#Div2
{
  z-index: -1;
  border: 1px solid black;
  width: 300px;
  height: 200px;
  margin: 50px 0 0 50px;
}
#Div3
{
  border: 1px solid black;
  width: 200px;
  height: 150px;
  margin: 23px 0 0 47px;
}

#DivBtn
{
  margin-top: 30px;
}

<div id="Div1">
  <div id="Div2">
    <div id="Div3">

    </div>
  </div>
</div>

<div id="DivBtn"> <input type="button" id="btnR" value="Red" onclick="btnRed();"> &nbsp;&nbsp;
  <input type="button" id="btnG" value="Green" onclick="btnGreen();">&nbsp;&nbsp;
  <input type="button" id="btnB" value="Blue" onclick="btnBlue();">&nbsp;&nbsp;
  <input type="button" id="btnReset" value="Reset" onclick="btnReset()">
</div>

回答1:

Be careful when you're using id on the html tags, because it makes an automatic var declaration using the id. So, you're overriding the btnReset function with the btnReset pointing to the <input>.

Solution 1: change the id="btnReset" or the function btnReset() name!

Solution 2: move your <script> to the end of the document (just before the </body> end tag, so your function overrides the automatic declarated var.

Additional info: http://www.2ality.com/2012/08/ids-are-global.html

来源：https://stackoverflow.com/questions/36703109/how-to-change-div-background-color-on-button-click

标签

javascript

html

onclick