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

Question

就像我的描述说。

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> 

上面的div没有响应按钮点击。似乎相应的JS函数甚至没有被调用。

我知道这可能是一个小的语法错误，但我无法找到它为我的生活。

谢谢你的帮助。

Answer 1

我无法在小提琴中工作，它说nextStep功能不可用。 但NEXTSTEP的这个定义应该工作：

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

，改变你的按钮来此？

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

注意，“围绕参数走在了的getElementById叫什么你试图让是名为divShow的元素，而不是变量内容引用的元素。

Answer 2

看起来函数没有被调用，因为jsfiddle将您的javascript封装在一个匿名函数中，该函数在窗口加载时执行。您声明的函数的范围仅在该函数内。

相反，尝试安装它作为一个全球性的功能

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