title: JavaScript - Revert element to original style after clicking another element
body: <p>So I'm building a calendar program, and I want the user to be able to select a day. Using a <code>&lt;table&gt;</code>, the <code>&lt;td&gt;</code> highlights when clicked by applying <code>className="NewStyle"</code> to the box. I want that cell to go back to normal after clicking on another cell, but it just remains in its new style.</p>
  
  <p>How do I make JS revert any non-clicked cell to normal when another cell is clicked?</p>
  
  <p>Here's a <a href="https://jsfiddle.net/kt01q32w/3/" rel="nofollow">JSFiddle</a>. Thanks for any help!</p>
  
  <p><strong>HTML</strong></p>
  
  <p>The cells look like this:</p>
  
  <pre><code>&lt;td id="td_4" onclick="change(4)"&gt;4&lt;/td&gt;
  &lt;td id="td_5" onclick="change(5)"&gt;5&lt;/td&gt;
  &lt;td id="td_6" onclick="change(6)"&gt;6&lt;/td&gt;
  </code></pre>
  
  <p>Clicking <code>td_4</code> will successfully change the style. But clicking <code>td_6</code> will also successfully change styles, but leave <code>td_4</code> in its new style instead of reverting it.</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function change(x) {
      document.getElementById("td_" + x).className = "selected";
  }
  </code></pre>