title: how to add and remove classes from HTML elements using JavaScript
body: <p>My task is to modify the test.js code so that it will toggle the styles. This means that when a user clicks on the button a second time, it should revert back to its original state before it was changed.</p>
  
  <p>This will require you to use conditional statements in JavaScript, which are very similar to the ones you used in Java.</p>
  
  <p>How to add and remove classes from HTML elements using JavaScript ?</p>
  
  <p>I was able to make the click work on my button so far here is my code</p>
  
  <p>I have tried </p>
  
  <pre><code>var element = document.getElementById("h1");
  
  if (element.classList) { 
     element.classList.toggle("title-button");
  } else {
  
     var classes = element.className.split(" ");
     var i = classes.indexOf("title-button");
  
     if (i &gt;= 0) 
       classes.splice(i, 1);
     else 
       classes.push("title-button");
       element.className = classes.join(" "); 
  }
  </code></pre>
  
  <p>But it did not work </p>
  
  <p>Here is what is working with only one click:</p>
  
  <pre><code>var buttonElement  = document.getElementById("title-button");
  
  var elementsArray = document.getElementsByTagName("h1");
  var element = elementsArray[0];
  buttonElement.addEventListener("click", function(){
      element.classList.add("bordered-text");
      element.style.color = "yellow";
  
  });
  </code></pre>
  
  <p>Clicking the Alter Title button should enable the user to add or remove the styles that I have been working with. "title button" should become "Alter button" so when the user clicks on the title the style should change.</p>