title: Javascript hide and display elements by id not working for multiple cases
body: <p>i don't really know any javascript but I've been able to piece together a means to programmatically hide html tables on a webpage using versions of the following line to hide them when the page opens:</p>
  
  <pre><code>document.getElementById("approved").style.display = "none";
  </code></pre>
  
  <p>etc</p>
  
  <p>and then depending on a value being chosen from a select menu have the element appear, using this:</p>
  
  <pre class="lang-js prettyprint-override"><code>document.getElementById('cboaim').addEventListener('change', function (){
  var style = this.value == "10" ? 'block' : 'none';
  document.getElementById('approved').style.display = style;
  var style = this.value == "13" ? 'block' : 'none';
  document.getElementById('enddate').style.display = style;
  var style = this.value == "14" ? 'block' : 'none';
  document.getElementById('tortm').style.display = style;
  var style = this.value == "17" ? 'block' : 'none';
  document.getElementById('enddate').style.display = style;
  });
  </code></pre>
  
  
  
  <p>Which works for virtually everything except for the two lines relating to 'enddate'.  It works for ONE of the values but not the other.  I'm assuming referring to the element id twice breaks this code (both select 13 and 17 need this date box to appear).</p>
  
  <p>For more complex reasons I can't just add another table with a different id so I'm hoping somebody out there knows an easy way around the problem.  Please be gentle with me, I know the javascript is probably offensive to a programmer ;-)</p>
  
  <p>I'd also happily use a function attached to an onchange on the select if that was easier? I'm only using the addeventlistener because a search on stackoverflow came up with that particular solution.</p>
  
  <p>Cheers
  Les</p>