JavaScript JavaScript and the DOM Getting a Handle on the DOM A Simple Example

Tibor Ruzinyi
Tibor Ruzinyi
13,537 Points

One solution to change color after a second click :)

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