title: How to change CSS display property using JavaScript?
body: <p>I'm having problem about changing CSS display property to "none" using javascript</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="mydiv" onClick="clickDiv1()"&gt;hello&lt;/div&gt;
  &lt;div class="mydiv" onClick="clickDiv2()"&gt;hi&lt;/div&gt;
  &lt;div class="mydiv" onClick="clickDiv3()"&gt;goodbye&lt;/div&gt;
  </code></pre>
  
  <p>And here is my script:</p>
  
  <pre><code> function clickDiv1() { 
  alert('You clicked the first div!');
  document.getElementByClassName('mydiv').style.display="none";
  }
  
   function clickDiv2() {
  alert('You clicked the second div!');
  document.getElementByClassName('mydiv').style.display="none";
  }
  
   function clickDiv3() {
  alert('You clicked the second div!');
  document.getElementByClassName('mydiv').style.display="none";
  }
  </code></pre>
  
  <p>What I wanted is, different div alert different text when click on it, but when click on any div all div is invisible.</p>
  
  <p>When I click on my div, the alert is execute but style doesn't change.</p>
  
  <p>Why it doesn't work? Please help me!!</p>