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>
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.