javascript function onclick must click twice -_- why so?

Question

I have a page(it is an faq page for a web site) such that when a user click on a div (e.g. #question01) there's a new div that appears below it. Really easy but the thing is that with my function, when you click the first time, nothing appears, then another click and there you go. My #faqAnswer01 has now a "unhide" class which is set to display:block; (.hide = display:none;)

So here are my two question :

1- Why do I have to click twice for my function to get executed?

2- How can I fix my code so that it works after just one click?

HTML CODE

<div id="faqContainer">

   <div id="question01" onclick="showAnswer('faqAnswer01','imgArrow01');">Here's a question?<img src="public/images/gt.png" class="imgArrow" id="imgArrow01"></div>
        <div id="faqAnswer01" class="faqAnswerDiv hide">bla bla bla</div>

   <div id="question02" onclick="showAnswer('faqAnswer02','imgArrow02');">Another question here? <img src="public/images/gt.png" class="imgArrow" id="imgArrow02"></div>
    <div id="faqAnswer02" class="faqAnswerDiv hide">answer here.</div>

</div>

My function:

function showAnswer(idAnswer , idImg) {
    if (document.getElementById(idImg).src == "http://www.cbifinance.org/public/images/gt.png") {
        document.getElementById(idImg).src = "http://www.cbifinance.org/public/images/gt90.png";
        document.getElementById(idAnswer).className = 'faqAnswerDiv unhide';
    } else {
        document.getElementById(idImg).src = "http://www.cbifinance.org/public/images/gt.png";
        document.getElementById(idAnswer).className = 'faqAnswerDiv hide';
    }
}

iLikePrograms · Accepted Answer · 2014-05-29 16:45:13Z

3

Try changing the image.src to the full URL and it should work.

The reason this would work is that your src is public/images/gt.png even though when it loads the image it finds it correctly, the src is still public/images/gt.png.

So the first time you click, it runs into the else statement, and sets the src to the full absolute url. Then you click again and it changed the src to what you expected the first time. The same goes for the class, its adding the hide class to the image, which it already has but the second time it adds show. The code is functioning correctly, the if statement is just wrong.

edited May 29, 2014 at 16:45

answered May 29, 2014 at 16:18

iLikePrograms

4682 silver badges9 bronze badges

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

7 Comments

matt_bois Over a year ago

Great! Now I know what's wrong in this. Thanks you. I tried your version but now nothing is working. Is the .src must start with full absolute url?

iLikePrograms Over a year ago

Don't see why it wouldn't work. Aslong as the image.src and the if statement.src are the same text it should work.

matt_bois Over a year ago

.src only gives absolute url path. Even if I put a if statement with my img.src == 'public/images/gt.png', it will never gives that. What I did to fix my problem is that I simply put a full url in my <img src=""> :)!

iLikePrograms Over a year ago

Huh. I would have thought it would give you whatever you has in the src originally. Not what it resolves it too. Cool :) glad I could help matt

iLikePrograms Over a year ago

Updated my answer to the correct solution as per your comment!

|

Hanky Panky · Accepted Answer · 2014-05-29 16:18:26Z

2

Because first time the src is not what your if is checking for

src="public/images/gt.png"

VS

src="http://www.cbifinance.org/public/images/gt.png"

Then on the first click you set it to that. And then for the second time your if condition is met.

answered May 29, 2014 at 16:18

Hanky Panky

46.9k9 gold badges76 silver badges95 bronze badges

1 Comment

Jayna Tanawala Over a year ago

I am giving full path in src to match with like domainName/images/imageName. But it is going in else part always.

Collectives™ on Stack Overflow

javascript function onclick must click twice -_- why so?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related