隐藏的div不会在点击时显示-Javascript，没有Jquery

Question

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.

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

Answer 2

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