Hidden div will not show on click - Javascript, no Jquery

Question

Just like my description says.

<div id="step2" class="question">
    <p>Step two:</p>
    <div id="resultOne" class="script">
        <p>"Test Yes!</p>
    </div>
    <div id="resultTwo" class="script">
        <p>"Test No"</p>
    </div>
</div>

The above div isn't responding to button clicks. It seems like the corresponding JS function isn't even being called.

I know it's probably a minor syntax error, but I can't find it for the life of me.

Thank you for the help.

There is no element with the ID divShow and divHide? And you're also not using the passed arguments? Are you perhaps mixing things up? — w00
– w00, Commented Mar 10, 2013 at 19:04

fredrik · Accepted Answer · 2013-03-10 19:06:01Z

1

I could not get it to work in the fiddle, it said that the nextStep function was not available. But this definition of nextStep should work:

function nextStep(divShow, divHide, divReveal) {
    var show = document.getElementById(divShow);
    var hide = document.getElementById(divHide);
    var reveal = document.getElementById(divReveal);
    show.style.display = "inline-block";
    hide.style.display = "none";
    if (reveal.style.display == "none") 
        reveal.style.display = "block";
}

And change your buttons to this:

<button type="button" onclick="javascript:nextStep('resultOne', 'resultTwo', 'step2')">Yes</button>
<button type="button" onclick="javascript:nextStep('resultTwo', 'resultOne', 'step2')">No</button>

Notice that the " are gone around the parameters in the getElementById call? What you were trying to get was the element named divShow, not the one referenced to by the content of the variable.

answered Mar 10, 2013 at 19:06

fredrik

6,6783 gold badges40 silver badges49 bronze badges

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

8 Comments

Mrow Over a year ago

Ah, I see. What you said makes a lot of sense, but it still doesn't seem to be working for me. I feel like this isn't the correct way to go about using a button to make a div visible/invisible

fredrik Over a year ago

Your method would indeed not scale very well. I am however not sufficiently well versed in DOM usage to guide to you a better solution. But we can try to make the one you have working - for a start. If you look in the javascript debug console, what error does it give?

Mrow Over a year ago

I'm sorry, but I don't know how to use the debug console. Do you mean the one in my web browser (FF) or is there in in JSFiddle?

fredrik Over a year ago

In FF. And I can't help you with the FF debug console - in Chrome I just press F12 and presto there it is (after opening the Console tab).

Mrow Over a year ago

I have it open, but it isn't responding to anything I do in JSFiddle

|

fuzic · Accepted Answer · 2013-03-10 19:06:07Z

0

It appears the function isn't called because jsfiddle wraps your javascript in an anonymous function that executes on window load. That means the scope of the function you declared is only within that function.

Instead, try attaching it as a global function

window.nextStep = function (divShow, divHide, divReveal) {
    var show = document.getElementById(divShow);
    var hide = document.getElementById(divHide);
    var reveal = document.getElementById(divReveal);
    show.style.display = "inline-block";
    hide.style.display = "none";
    if (reveal.style.display == "none") 
        reveal.style.display = "block";
}

answered Mar 10, 2013 at 19:06

fuzic

2,54217 silver badges22 bronze badges

Collectives™ on Stack Overflow

Hidden div will not show on click - Javascript, no Jquery

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related