One solution to change color after a second click :)

Question

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <button id="mybutton">Click ME</button>
    <script src="app.js"></script>
  </body>
</html>



let x = 0;
let y = 2;
let g = 0;

const myHeading = document.getElementById('myHeading');

myHeading.addEventListener('click', () => {

  x += 1;
  let z = x % y;  
  console.log('z before if is : ' + z);                        
   if( z == 0 ){
  console.log('z after if is : ' + z);   
  myHeading.style.color = 'red';
  console.log("x = "+x + " y = " + y + " z = " + z );
  } else {
    myHeading.style.color = 'purple';
    console.log("x = "+x + " y = " + y + " z = " + z );
  }                      
});

Answer 1 · 2020-10-01T09:05:37Z

October 1, 2020 9:05am

Ingenious! But, there's a more 'native' way to do this, using JS's toggle method.

If we add a .turn-red class to our CSS, like so (note, the class name is arbitrary)...

.turn-red {
  color: red;
}

... we can simply add and remove this class from our target with the following:

const myHeading = document.querySelector("#myHeading");
myHeading.addEventListener("click", () =>
  myHeading.classList.toggle("turn-red")
);

More information here (links to MDN).

Welcome to the Treehouse Community

Looking to learn something new?

Tibor Ruzinyi

Tibor Ruzinyi

One solution to change color after a second click :)

1 Answer

Mark Tripney

Mark Tripney