EventListener Only Firing Once

Question

still learning the basics of JS, working with EventListeners now. Trying to make a button that changes the color of text back and forth but I think I'm misunderstanding the nature of the method, or using it incorrectly. I don't believe it's a syntax issue.

I have the text and the button, both with Id's. I created variables for both elements. I add an event listener to the button, and defined the if else statement in the function. The "if" portion of the function executes without issue, but that's where it ends. Sorry in advance for the formatting I wasn't sure what made the most sense. Thanks!

Here's the HTML:

<h1 id="header"> Here's some text </h1>

<button id="button"> Change the Color </button>

CSS:

#header {
    color: red;
  }

And the JavaScript:

var header = document.getElementById("header");

var button = document.getElementById("button");

button.addEventListener("click", function() {

  if (header.style.color = "red")   

{header.style.color = "blue";} 

else if (head.style.color = "blue")
{header.style.color = "red";
  }
})

Answer 1

In JavaScript (and other languages) you need to use == to check for equality.

However, in JavaScript there is also === . === is the strict equality operator, meaning it does not do type conversion. What does that mean? It means:

"5" == 5 // true, since "5" as a number is equal to 5, the literal number

"5" === 5 // false, since a string cannot equal a number

So in your if statements you should use == or === instead of just = .

Answer 2

Others have mentioned the use of = vs == vs === - which is definitely your problem, but you're also going to have other problems with comparing styles the way you are doing.

The style property is unique and cumbersome. You have the "style" property which is a property of the DOM node (just like href for anchors or type for inputs). Then you have styles which are applied from a stylesheet - either a <style> tag or external stylesheet file. Sometimes the two different styles sources are in conflict.

For style properties, you read the node.style.color property like you are doing. To get the actual color being applied to the node, you must use window.getComputedStyle() . Let me explain the difference by example:

 const div = document.getElementById('foo') div.style.color; //-> red window.getComputedStyle(div).color; //-> rbg(0, 255, 0)

 #foo { color: green !important }

 <div id="foo" style="color: red">Hello!</div>

Notice how we set red on the node itself, but green !important in the stylesheet. The !important will win, which is why the text is green. Furthermore, the browser converts the color name green to its RGB equivalent rgb(0, 255, 0) . This can be tedious to reconcile. What I usually recommend is having multiple class names and switching between those on click:

 var header = document.getElementById("header"); var button = document.getElementById("button"); button.addEventListener("click", function() { if (header.classList.contains("red")) { header.classList.remove("red") header.classList.add("blue") } else if (header.classList.contains("blue")) { header.classList.remove("blue") header.classList.add("red") } })

 .red { color: red }.blue { color: blue }

 <h1 id="header" class="red"> Here's some text </h1> <button id="button"> Change the Color </button>