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?

`console.log(name.style.backgroundColor)` – epascarello Oct 15 '15 at 02:55 — epascarello, Oct 15 '15 at 02:55

Sarjan Desai · Answer 1 · 2015-10-15T03:14:52.397

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>

Yea I am dumb, thank you for the reminder T_T forgot to change the purple back to black sdfobhsdui9gbasui9gbguasd fauk. — Mirthi, Oct 15 '15 at 03:38

score 0 · Answer 2 · answered Oct 15 '15 at 03:09

0

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";
    }
}

answered Oct 15 '15 at 03:09

leo.fcx

6,137
2
21
37

I am an idiot, thank you so much i forgot to change it to black from purple after playing around with it, im a retard – Mirthi Oct 15 '15 at 03:38

score 0 · Answer 3 · edited May 23 '17 at 12:23

0

You have a couple of issues here:

name is 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.

edited May 23 '17 at 12:23

Community

1
1

answered Oct 15 '15 at 03:10

chiliNUT

18,989
14
66
106

score 0 · Answer 4 · edited Oct 15 '15 at 05:43

0

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);
})();

edited Oct 15 '15 at 05:43

m.s.

16,063
7
53
88

answered Oct 15 '15 at 03:15

Renan Bardy

33
4

Thank you for helping! I am so stupid, the Last part was purple because i was testing something and i forgot to change it T_T – Mirthi Oct 15 '15 at 03:36

score 0 · Answer 5 · answered Oct 15 '15 at 03:16

0

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.

answered Oct 15 '15 at 03:16

DarionB

1

I am a retard, i changed it to purple for a test and forgot to change it back....god dammit. Thank you so much! – Mirthi Oct 15 '15 at 03:37

Using Javascript to Alternate background color of HTML element

5 Answers5