title: Can I reversing these buttons easier on myself?
body: <p>So, I'm wondering if i can make this any simpler (less repetition in the javascript) and whether or not I can make it so the title only turns black when hitting a button if it is that buttons color. If the second part of the question is possible it doesn't need to be simpler I'm just trying to figure out how to make the function target only tags with a specific attribute (style). Is this possible?</p>
  
  <p>I'm new to coding I've been trying to figure this out for a few hours and can't find something already uploaded... possibly due to my lack of being able to condense the question.</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;
          Flood
      &lt;/title&gt;
      &lt;link rel="stylesheet" href="Style.css"&gt;
      &lt;style&gt;
          h1 {
              text-align: center;
              padding-left: 30%;
              padding-right: 30%;
              width: 40%;
          }
  
          p {
              font-size: 14pt
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;section class="mainpage"&gt;
      &lt;h1 id="FS"&gt; Fun Stuff &lt;/h1&gt;
      &lt;div&gt;
          &lt;button id="Red"&gt; Red&lt;/button&gt;
          &lt;button id="Blue"&gt; Blue&lt;/button&gt;
          &lt;button id="Yellow"&gt; Yellow&lt;/button&gt;
          &lt;button id="Blink"&gt; Blink&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="explaination"&gt;
          &lt;p&gt;Click the buttons at the top to see what I mean.
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;script&gt;
      const a = document.getElementById("FS");
      const b = document.getElementById("Red");
      const c = document.getElementById("Blue");
      const d = document.getElementById("Yellow");
      const e = document.getElementById("Blink");
  
      /*reset Functions*/
  
      function blackFunctionB() {
          a.style.color = "black";
          b.removeEventListener("click", blackFunctionB,);
          b.addEventListener("click", redFunction,);
      }
  
      function blackFunctionC() {
          a.style.color = "black";
          c.removeEventListener("click", blackFunctionC,);
          c.addEventListener("click", blueFunction,);
      }
  
      function blackFunctionD() {
          a.style.color = "black";
          d.removeEventListener("click", blackFunctionD,);
          d.addEventListener("click", yellowFunction,);
      }
  
      function showFunction() {
          a.style.display = "block";
          e.removeEventListener("click", showFunction,);
          e.addEventListener("click", blinkFunction,)
      }
  
      /*end reset functions*/
  
      b.addEventListener("click", redFunction,);
  
      function redFunction() {
          a.style.color = "Red";
          b.removeEventListener("click", redFunction,);
          b.addEventListener("click", blackFunctionB,);
      }
  
      c.addEventListener("click", blueFunction,);
  
      function blueFunction() {
          a.style.color = "Blue";
          c.removeEventListener("click", blueFunction,);
          c.addEventListener("click", blackFunctionC,);
      }
  
      d.addEventListener("click", yellowFunction,);
  
      function yellowFunction() {
          a.style.color = "Yellow";
          d.removeEventListener("click", yellowFunction,);
          d.addEventListener("click", blackFunctionD,);
      }
  
      e.addEventListener("click", blinkFunction,);
  
      function blinkFunction() {
          a.style.display = "none"
          e.removeEventListener("click", blinkFunction,);
          e.addEventListener("click", showFunction,);
      }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  
  
  <p>So basically when you click on the yellow button it makes the block turn yellow, then if you hit the blue button it makes it blue, but if you hit the yellow button again it makes it black. Alternatively, when you hit the yellow then blue twice then yellow again it stays black. Is there a way to make it only turn black if you hit the yellow button when it is already yellow?</p>