What's the issue with this basic JavaScript?

Question

I am trying to write basic JavaScript which changes the background of a paragraph to yellow and then to pink on click.

<p id="foo">Hello, people!</p>

and script is:

window.onload = function(){
var foo = document.getElementById("foo");
foo.onclick = function(){
        if(foo.style.background!=="yellow")foo.style.background = "yellow";
        if(foo.style.background === "yellow")  foo.style.background = "pink";
};
};

The color changes to yellow on first click but it does not change to pink when I click again. I can't figure out the problem.

Easiest thing is to stick an alert(foo.style.background) or a console.log(foo.style.background) in your onclick function to see what the value is each time. — Tom
– Tom, Commented Oct 25, 2011 at 17:56
Internally, the browser may be using a different representation than the string "yellow" to denote the background. console.log(foo.style.background) to see what it actually is. — Michael Berkowski
– Michael Berkowski, Commented Oct 25, 2011 at 17:56
@Tom , @Michael using console.log returned this: none repeat scroll 0% 0% yellow — Jatin
– Jatin, Commented Oct 25, 2011 at 18:14
while in Chrome console.log simply returned yellow This seems to be the problem. — Jatin
– Jatin, Commented Oct 25, 2011 at 18:16

Joe · Accepted Answer · 2011-10-25 18:12:24Z

7

EDIT: Don't use background, use backgroundColor

Fixed example

    if(foo.style.background!=="yellow")foo.style.background = "yellow";
    if(foo.style.background === "yellow")  foo.style.background = "pink";

needs to be:

    if(foo.style.background!=="yellow")foo.style.background = "yellow";
    else if(foo.style.background === "yellow")  foo.style.background = "pink";

because you changing it to yellow, then checking if it's yellow and making it pink

edited Oct 25, 2011 at 18:12

answered Oct 25, 2011 at 17:55

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

BoltClock Over a year ago

Well, here's one more reason to use curly braces, line breaks and indentation with if/else blocks.

Jatin Over a year ago

No. It does not work even with 'else'. Plus even without else it should do same thing.

BoltClock Over a year ago

@Jatin: No, it shouldn't. You need to add the else and still keep it there, if anything.

Jatin Over a year ago

@BoltClock Yes, curly braces and indentation should have been used but that does not seem to be the problem.

Joe Over a year ago

Because firefox addes other values, none repeat scroll 0% 0% yellow

|

Sparky · Accepted Answer · 2011-10-25 17:55:22Z

0

Try changing

if(foo.style.background === "yellow")

to this

if(foo.style.background == "yellow")

answered Oct 25, 2011 at 17:55

Sparky

15.1k2 gold badges34 silver badges45 bronze badges

Comments

Mun · Accepted Answer · 2011-10-25 17:56:52Z

0

It might be due to the way you're doing your comparison:

foo.onclick = function(){
        if(foo.style.background != "yellow") foo.style.background = "yellow";
        if(foo.style.background == "yellow") foo.style.background = "pink";
};

Note the use of "!=" and "==" instead of "!==" and "===".

answered Oct 25, 2011 at 17:56

Mun

14.4k12 gold badges62 silver badges83 bronze badges

Comments

Andreas Louv · Accepted Answer · 2011-10-25 18:49:29Z

0

Try:

var foo = document.getElementById("foo");
foo.onclick = function(){
        if(foo.style.background!="yellow")foo.style.background = "yellow";
        else if(foo.style.background =="yellow")  foo.style.background = "pink";
};

http://jsfiddle.net/AvKPE/

var foo = document.getElementById("foo");
foo.onclick = function(){
        if(foo.style.backgroundColor!="yellow")foo.style.backgroundColor = "yellow";
        else if(foo.style.backgroundColor =="yellow")  foo.style.backgroundColor = "pink";
};

http://jsfiddle.net/AvKPE/2/

edited Oct 25, 2011 at 18:49

answered Oct 25, 2011 at 17:58

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

1 Comment

Andreas Louv Over a year ago

Ok the problem is that firefox returns the whole background property: 0% 0% fixed ... yellow ... Try new link: jsfiddle.net/AvKPE/2

Collectives™ on Stack Overflow

What's the issue with this basic JavaScript?

4 Answers 4

7 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related