title: style="display:none;" breaking onclick
body: <pre><code>&lt;div id="bottom_right" style="display:none;"&gt;
      &lt;input type="text" name="mytext" id="mytext" onclick="myFn('mytext')"&gt;
  &lt;/div&gt;
  
  function myFn(id){
      document.getElementById(id).value = 'hello';
  }
  
  function showForm() {
      document.getElementById("bottom_right").style.display = 'block';
  }
  
  function showRoom() {
      clearRoommates();
      var root = document.getElementById("bottom_left");
      root.innerHTML="";
  var inputRadio = "&lt;h3&gt;Select a room from below&lt;/h3&gt;&lt;br/&gt;";
      inputRadio += "&lt;div id = 'left'&gt;&lt;label&gt;&lt;input name='rad' type='radio'&gt;510&lt;/label&gt;&lt;label&gt;&lt;input name='rad' type='radio'&gt;520&lt;/label&gt;";
      inputRadio += "&lt;label&gt;&lt;input name='rad' type='radio'&gt;530&lt;/label&gt;&lt;label&gt;&lt;input name='rad' type='radio'&gt;540&lt;/label&gt;&lt;/div&gt;";
      inputRadio += "&lt;div id = 'right'&gt;&lt;label&gt;&lt;input name='rad' type='radio'&gt;550&lt;/label&gt;&lt;label&gt;&lt;input name='rad' type='radio'&gt;560&lt;/label&gt;";
      inputRadio += "&lt;label&gt;&lt;input name='rad' type='radio'&gt;570&lt;/label&gt;&lt;label&gt;&lt;input name='rad' type='radio'&gt;580&lt;/label&gt;&lt;/div&gt;";
      root.innerHTML=inputRadio;
      var element = document.getElementsByTagName("input");
      for (var i=element.length-1; i&gt;=0; i--) {
          element[i].setAttribute('onclick',"showForm()");
      }
  }
  </code></pre>
  
  <p>There is additional code elsewhere that changes the display style from 'none' to 'block'. When a user clicks the input box it should automatically display the text 'hello'. This works fine if I remove the style from the div or set it to 'block' initially.</p>
  
  <p>Why doesn't this work when the display style is initially 'none'?</p>
  
  <p><em>edited to include display change function</em></p>