HTML/Javascript - Button takes two clicks to execute click event

Question

Testing out a simple toggle display, however, it takes two clicks to toggle the display the first time. Afterwards it does it in one.

<html>
<head>
<style>
#carousel{border:2px solid blue;
width:1280px;
height:720px;}

#p2{visibility:hidden;}

#p1{display:block;}

#btn{position:absolute;
    top:2000px;}
</style>

<script src="mainScript.js"></script>
</head>

<body>

<div id="carousel">
    <img id="p1" src="pic1.jpg">
    <img id="p2" src="pic2.jpg">
</div>

<button type="button" id="button" onclick="clickEvent()">Click</button>

</body>
</html>

And here is my javascript:

function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "block")
    p.style.display = "none";
else
    p.style.display = "block";
}

It should be noted I am using no jQuery, as all other questions I found about this were jQuery related.

Check out this fiddle I put together. I tested your code and just added the JavaScript in a script tag in the <head></head> tag of your html and it worked wonderfully for me. ic3b3rg's answer is a good simplification of your code but from the way jsfiddle looked, it appeared your code was working correctly as is. I tested it in Chrome. You might check that your reference <script src="mainScript.js"></script> is pointing to the right place. — War10ck
– War10ck, Commented Dec 31, 2012 at 16:30
Tried that, and it didn't work. And my mainScript.js is indeed in the right place. Tested it in several browsers, all do the same thing — starscape
– starscape, Commented Dec 31, 2012 at 16:37

ic3b3rg · Accepted Answer · 2012-12-31 16:22:58Z

5

function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "none")
    p.style.display = "block";
else
    p.style.display = "none";
}

you can also simplify things a bit:

p.style.display = p.style.display == "none" ? "block" : "none";

answered Dec 31, 2012 at 16:22

ic3b3rg

15k4 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

War10ck · Accepted Answer · 2012-12-31 16:40:40Z

1

I have an update to my previous fiddle posted in my comment above. My previous fiddle still ran into the same problem after further testing of the double click.

After stepping through, the initial display value is coming back as "" not block. I'm not sure why its not taking your value you set in the <head></head> section but if you inline it like so:

<img id="p1" src="pic1.jpg" style="display: none;" />

it works correctly the first time with only one click of the button.

Here is my new updated fiddle demonstrating this.

I'm going to look more into why your styling in the <head></head> section but for now, here is a quick (and semi crude) fix.

Hope this helps and best of luck!

answered Dec 31, 2012 at 16:40

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

1 Comment

starscape Over a year ago

This fixed it, many thanks! All I did was change "block" to "inline". Everyone has been very helpful, and this was a wonderful first experience using Stack Overflow.

Will C. · Accepted Answer · 2012-12-31 16:22:27Z

1

The default display attribute is "inline" so your logic is not taking this into account. It is changing it the block on the first run, so it is still visible, then it is hiding it on the second click (setting display to none)

answered Dec 31, 2012 at 16:22

Will C.

5993 silver badges8 bronze badges

4 Comments

War10ck Over a year ago

The OP is setting the initial display value. I.E. he is overwriting inline with #p1{display:block;}

starscape Over a year ago

If you take a look at the CSS, I already set the p1 element display attribute to block. EDIT: Didn't see war10cks comment

Ben Over a year ago

p.style.display will actually return an empty string in Firefox the first time it is read.

Will C. Over a year ago

So isn't the problem that the display property is block initially, making the image visible? The button works properly, toggling the image to be visible/invisible.

Saeed Noruzi · Accepted Answer · 2021-11-22 14:43:05Z

0

your answer

    function clickEvent(){
    var p = document.getElementById("p1");
    if(p.style.display === "block")
        p.style.display = "none";
    else
        p.style.display = "block";
    }

I changed the condition I have the same problem and I realize that it was about the order code executes my CSS style for the element was already "block", and I was checking if the element display was "none" then do the display block thing, so when the first time I was clicking, it changed the display to "none", then in the second time it would change the display to block, I hope It was clear my explanation enjoy

edited Nov 22, 2021 at 14:43

answered Nov 21, 2021 at 10:55

Saeed Noruzi

359 bronze badges

1 Comment

Saeed Noruzi Over a year ago

its about order in your style

sangram parmar · Accepted Answer · 2016-11-28 12:18:06Z

-2

The same problem can be resolved by just replacing "block" : "none"; by ?"none" : "block"; you will not need to double click the toggle button for the first time, single click will work.

edited Nov 28, 2016 at 12:18

sangram parmar

8,7862 gold badges26 silver badges48 bronze badges

answered Nov 28, 2016 at 10:22

Ataur Rahman

1

Collectives™ on Stack Overflow

HTML/Javascript - Button takes two clicks to execute click event

5 Answers 5

Comments

1 Comment

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related