CODEWITHSUNDEEP
javascripthtmlbuttonhide
Mrow
Mrow

Reputation: 115

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

Just like my description says.

Fiddle

<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.

Upvotes: 0

Views: 507

Answers (2)

fuzic
fuzic

Reputation: 2512

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";
}

Upvotes: 0

fredrik
fredrik

Reputation: 6638

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.

Upvotes: 1

Related Questions