I have the following code that creates a few functions: hidePara1(), which toggles between the CSS hidden attribute of a paragraph; and displayFrame(), which does the same with the display attribute of an Iframe. Both the paragraph and the Iframe are set to display:none and visibility:hidden respectively, using CSS.

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');
}

And the HTML where the elements exist, and in which I also call the functions via onClick attributes.

<a href="#" onClick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onClick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

The problem is bizarre: both onclick events work perfectly, from the second click onwards. In other words, neither works when first clicked. This seems to be quite a mon 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.

A solution to this would be very appreciated.

Thanks

I have the following code that creates a few functions: hidePara1(), which toggles between the CSS hidden attribute of a paragraph; and displayFrame(), which does the same with the display attribute of an Iframe. Both the paragraph and the Iframe are set to display:none and visibility:hidden respectively, using CSS.

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');
}

And the HTML where the elements exist, and in which I also call the functions via onClick attributes.

<a href="#" onClick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onClick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

The problem is bizarre: both onclick events work perfectly, from the second click onwards. In other words, neither works when first clicked. This seems to be quite a mon 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.

A solution to this would be very appreciated.

Thanks

• javascript

• post your code in a jsfiddle and share here. – user3998237 Commented Mar 6, 2015 at 0:19

4 Answers 4

In the handler, you access Par1.style. The style property of an element refers to the style properties in an inline style="..." HTML attribute. You specified that elsewhere, you had something like the following in CSS:

#para1 {
    display: none;
}

This doesn't get picked up in Par1.style.display. Look into getComputedStyle if you want to see what's currently applied. fiddle

Or just do your conditional the other way around:

Par1.style.display = ((Par1.style.display!='block') ? 'block' : 'none')

When you say that these elements are styled using CSS, I assume you mean "styled using some selector, e.g. #para1 { display:none; }".

Par1.style.display however, only looks for the style attribute on your div, which - in the case assumed above - is initially not set. Therefore, the first click will set style="display:none;" on the div, which you should be able to observe using developer tools or firebug.

FIDDLE DEMO

Your code works perfectly on the fiddle.

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
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');
}
</script>

these:

var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

shoud be done on load, i.e.:

// Global declaration, thos I don't think this matter as much as....
var Par1 ;
var Frame1 ;        


// ...this.  Your calls to getElementById() may be executing before 
// the page has finished loading.  Making the assignment in OnLoad
// guarantees the elements are available an I'm thinking should fix 
// the issue with it not working first time through.

function init() {
  Par1 = document.getElementById("para1");
  Frame1 = document.getElementById("iframe1");        
}

html:

<body onload="init();">