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();">
<input type="button" id="btnG" value="Green" onclick="btnGreen();">
<input type="button" id="btnB" value="Blue" onclick="btnBlue();">
<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();">
<input type="button" id="btnG" value="Green" onclick="btnGreen();">
<input type="button" id="btnB" value="Blue" onclick="btnBlue();">
<input type="button" id="btnReset" value="Reset" onclick="btnReset()">
</div>
Share
Improve this question
edited Jul 4, 2018 at 6:11
Elydasian
2,0666 gold badges26 silver badges43 bronze badges
asked Apr 18, 2016 at 19:51
user2298828user2298828
3
- 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
Reset to default 5Be 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();">
<input type="button" id="btnG" value="Green" onclick="btnGreen();">
<input type="button" id="btnB" value="Blue" onclick="btnBlue();">
<input type="button" id="btnReset" value="Reset" onclick="btnReset()">
</div>