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>

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>

• javascript
• html
• onclick

• 1 The code you posted works fine. – Dave Commented Apr 18, 2016 at 19:58
• Reset was broken for me after pasting code into local file and running with chrome – IrkenInvader Commented Apr 18, 2016 at 20:01
• check answer, and change reset ID or reset function name. – user2298828 Commented Apr 20, 2016 at 17:41

2 Answers 2

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./2012/08/ids-are-global.html

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

#Div1
{ 
  border: 1px solid black;
  height: 300px;
  width: 400px;
}




<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>