Using Javascript to Alternate background color of HTML element
Question
So I have a practise test that asks me to change the background color and text color of a paragraph section with id "fourth" from black background and white text to vise versa and reverse every 30 seconds preferably by using if/else statements. But for some reason my If statement (and probably my else statement) does not work.
the code i have so far is this:
HTML
<html>
<head>
<link href="teststyle.css" rel="stylesheet" type="text/css"/>
<script src="flash.js" type="text/javascript"></script>
</head>
<body>
<div id="first">
mares eat oats
</div>
<h1 id="second">
and does eat oats
</h1>
<p id="third">
and little lambs eat ivy
</p>
<p id="fourth">
Mirthipan Karunakaran
</p>
</body>
</html>
CSS
#first {
text-align: center;
}
#second {
color: green;
text-align: left;
}
#third {
color: orange;
text-align: right;
}
#fourth {
color: white;
background-color: black;
}
JAVASCRIPT
function updatePage(){
var name = document.getElementById("fourth");
if(name.style.backgroundColor == "black") {
name.style.backgroundColor = "pink";
} else {
name.style.backgroundColor = "purple";
}
}
function startUpdate(){
updatePage();
window.setInterval(updatePage,10 * 1000);
}
window.onload=startUpdate;
How would I go about making this work?
5 answers
solution1
0 2015-10-15 03:06:45
Issue here is in codition..
Default background color is black initially so if condition becomes true and color become pink and then when update() function call for second time, if condition becomes false and set backgroundColor to purple . For third time and onwards if condition always call else part because name.style.backgroundColor == "black" will never true.
So use only two color instead of three .
Check working snippet for understanding:
function updatePage() { var name = document.getElementById("fourth"); if (name.style.backgroundColor == "black") { name.style.backgroundColor = "white"; name.style.color = "black"; } else { name.style.backgroundColor = "black"; name.style.color = "white"; } } function startUpdate() { updatePage(); window.setInterval(updatePage, 1000); } window.onload = startUpdate;
#first { text-align: center; } #second { color: green; text-align: left; } #third { color: orange; text-align: right; } #fourth { color: white; background-color: black; }
<html> <head> <link href="teststyle.css" rel="stylesheet" type="text/css" /> <script src="flash.js" type="text/javascript"></script> </head> <body> <div id="first"> mares eat oats </div> <h1 id="second"> and does eat oats </h1> <p id="third"> and little lambs eat ivy </p> <p id="fourth"> Mirthipan Karunakaran </p> </body> </html>
solution2
0 2015-10-15 03:09:25
The problem is with your if statement . You never get a black background color.
See this working JSfiddle demo
And should we the working updatePage function:
function updatePage() {
var name = document.getElementById("fourth");
if (name.style.backgroundColor == "black") {
name.style.backgroundColor = "pink";
name.style.color = "black";
} else {
name.style.backgroundColor = "black";
name.style.color = "pink";
}
}
solution3
0 2015-10-15 03:10:05
You have a couple of issues here:
nameis a reserved property name, so you will encounter unexpected behavior trying to use it as a variable name. See Why can't I set a JavaScript function's name property?As others have said, due to your logic, once the background is purple, it will never change.
solution4
0 2015-10-15 03:15:24
I tried some tests and I had this code at end. When I use a (function(){})(); I'm stating this function at the the same time at the page loads.
function updatePage(){
var name = document.getElementById("fourth");
if(name.style.backgroundColor == "black") {
name.style.backgroundColor = "purple";
console.log('teste');
} else {
name.style.backgroundColor = "black";
}
}
(function(){
updatePage();
window.setInterval(updatePage,3000);
})();
solution5
0 2015-10-15 03:16:27
is it not changing at all? (if so you may need to define the variable.) or just not changing back? you say that it is supposed to change and reverse every 30 seconds but the way you have it it should change from black to pink, but it nothing will make it go back to black. the else statement should say:
else {
name.style.backgroundColor = "black";
}
this should change it back and forth.
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.