Question

谁能告诉我为什么这不起作用？不应在结果页面上显示“计算分数......”。两个函数之间似乎存在冲突，因为一个函数没有另一个正常工作。

此外，我对Javascript的了解接近于零，但我觉得必须有更好/更清洁的方法来做到这一点，所以如果有人有任何建议，我们将不胜感激。感谢

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="loading" style="display:none;">
    <p>Verifying response...</p>
  </div>
  <div id="loadingscore" style="display:none;">
    <p>Calculating score...</p>
  </div>
  <div id="questionOne">
    <p>This is the first question.</p>
    <button type="button" onclick="displayQuestion('questionTwo', 'questionOne');">
      <strong>Yes</strong>
    </button>
    <button type="button" onclick="displayQuestion('questionTwo', 'questionOne');">
      <strong>No</strong>
    </button>
  </div>
  <div id="questionTwo" style="display:none;">
    <p>This is the second question.</p>
    <button type="button" onclick="displayQuestion('questionThree', 'questionTwo');">
      <strong>Yes</strong>
    </button>
    <button type="button" onclick="displayQuestion('questionThree', 'questionTwo');">
      <strong>No</strong>
    </button>
  </div>
  <div id="questionThree" style="display:none;">
    <p>This is the third question.</p>
    <button type="button" onclick="displayResults('resultsPage', 'questionThree');">
      <strong>Yes</strong>
    </button>
    <button type="button" onclick="displayResults('resultsPage', 'questionThree');">
      <strong>No</strong>
    </button>
  </div>
  <div id="resultsPage" style="display:none;">
    <p>This is the results page.</p>
  </div>
  <script type="text/javascript">
    function displayResults(e, t) {
      document.getElementById(t).style.display = "none",    document.getElementById("loadingscore").style.display = "block", setTimeout(function() {
        toggle(e)
      }, 2000)
    }

    function toggle(e) {
      document.getElementById("loadingscore").style.display = "none", document.getElementById(e).style.display = "block"
    } 
    
    < /script> 
    
    < script type = "text/javascript" >
    
    function displayQuestion(e, t) {
      document.getElementById(t).style.display = "none ", document.getElementById("loading ").style.display = "block ", setTimeout(function() {
toggle(e)
  }, 1000)
}

    function toggle(e) {
      document.getElementById("loading ").style.display = "none ",document.getElementById(e).style.display = "block "
}
  </script>
</body>

</html>

Answer 1

在单个Js上下文中具有相同的函数名称。所以，最后一个将永远执行。

Javascript函数冲突

1 个答案: