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.

Answer 1

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