title: OnClick Functions Only Work On Second Click
body: <p>I have the following code that creates a few functions: <code>hidePara1()</code>, which toggles between the CSS <code>hidden</code> attribute of a paragraph; and <code>displayFrame()</code>, which does the same with the <code>display</code> attribute of an Iframe. Both the paragraph and the Iframe are set to <code>display:none</code> and <code>visibility:hidden</code> respectively, using CSS.</p>
  
  <pre><code>var Par1 = document.getElementById("para1");
  var Frame1 = document.getElementById("iframe1");        
  
  function hidePara1() {
    Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
  }
  
  function displayFrame() {
    Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
  }
  </code></pre>
  
  <p>And the HTML where the elements exist, and in which I also call the functions via onClick attributes.</p>
  
  <pre><code>&lt;a href="#" onClick="displayFrame();"&gt;Display iFrame&lt;/a&gt;        
  &lt;div class="frame-container"&gt;&lt;iframe id="iframe1" src="somelink" width="800" height="460"&gt;&lt;/iframe&gt;&lt;/div&gt;
  
  &lt;img id="img1" onClick="hidePara1();" src="someimage.jpg"&gt;
  &lt;div id="para1"&gt;
  &lt;p&gt;This is the text for paragraph 1.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is bizarre: both onclick events work perfectly, <em>from the second click onwards</em>. In other words, neither works when first clicked. This seems to be quite a common problem, judging by the tons of other similar questions I came across, but I can't figure it out, and one of those questions could help me. Note that it also needs to be vanilla JS - frameworks won't do.</p>
  
  <p>A solution to this would be very appreciated.</p>
  
  <p>Thanks</p>