Javascript函数似乎没有运行？答案

【问题标题】：Javascript function doesn't appear to run?Javascript函数似乎没有运行？
【发布时间】：2014-12-30 13:41:05
【问题描述】：

我正在尝试从我的 HTML 中的图像调用一个函数，想知道是否有人可以解释为什么该函数似乎没有运行？

function markAnswers() {
  var intCorrect = 0;
  if document.getElementById('question1').value.toUpperCase() = "GROUNDHOG DAY" {
    correct = (correct + 1);
  }

  if document.getElementById('question2').value.toUpperCase() = "CAMERON DIAZ" {
    correct = (correct + 1);
  }

  if document.getElementById('question3').value.toUpperCase() = "BLADE RUNNER" {
    correct = (correct + 1);
  }

  if document.getElementById('question4').value.toUpperCase() = "THE AVENGERS" {
    correct = (correct + 1);
  }

  if document.getElementById('question5').value.toUpperCase() = "WHOOPI GOLDBERG" {
    correct = (correct + 1);
  }

  switch (correct) {
    case 0:
      alert("You scored 0/5! You weren't even trying!");
      break;
    case 1:
      alert("You scored 1/5! Come on you can do better than that!");
      break;
    case 2:
      alert("You scored 2/5! Well at least you got a couple right!");
      break;
    case 3:
      alert("You scored 3/5! Average...");
      break;
    case 4:
      alert("You scored 4/5! Not bad... Not bad at all!");
      break;
    case 5:
      alert("You scored 5/5!! Perfection!");
      break;
    default:
      alert("Ermm... something went wrong. Well this is awkward.");
  }
}

.submitbtn {
  background-image: url('../images/markup.png');
  width: 221px;
  height: 39px;
  margin-left: auto;
  margin-right: auto;
}

.submitbtn:hover {
  background-image: url('../images/markdown.png');
}

<div class="quiz">
  <form>
    <h3>DOUGHY DRAGON</h3>
    <h3 class="answers">GROUNDHOG DAY</h3> 
    <input type="text" id="question1" name="q1" placeholder="Movie - 2 Words">
    <br>
    <h3>CORN MAIZE AD</h3>
    <h3 class="answers">CAMERON DIAZ</h3> 
    <input type="text" id="question2" name="q2" placeholder="Actress">
    <br>
    <h3>NEAR BLUNDER</h3>
    <h3 class="answers">BLADE RUNNER</h3> 
    <input type="text" id="question3" name="q3" placeholder="Movie - 2 Words">
    <br>
    <h3>SEVENTH GEAR</h3>
    <h3 class="answers">THE AVENGERS</h3> 
    <input type="text" id="question4" name="q4" placeholder="Movie - 2 Words">
    <br>
    <h3>WORD BOGGLE IHOP</h3>
    <h3 class="answers">WHOOPI GOLDBERG</h3> 
    <input type="text" id="question5" name="q5" placeholder="Actress">
    <br>
  </form>
  <div class="submitbtn" id="submitbutton" onclick="markAnswers()"></div>
</div>

我认为onclick="markAnswers()" 应该调用它。任何帮助将不胜感激！

【问题讨论】：

请整理一下缩进-谢谢
为什么您的按钮div 中没有任何内容？我们实际上无法点击它
“正确”变量未在您的共享代码中初始化。
尝试至少在您的 div 中提供&nbsp;，然后再试一次。
请不要提交有语法错误的代码。查看您的控制台以查找并修复这些错误。如果您不知道“控制台”是什么，请立即了解它。事实证明，您的计算机发现语法错误的速度比 SO 的人快得多，因此您可以立即修复它们并继续您的工作。

标签： javascript html css

【解决方案1】：

请正确检查您的条件语句：

if (document.getElementById('question1').value.toUpperCase() == "GROUNDHOG DAY"){
    correct = (correct +1);
}

代替：

if document.getElementById('question1').value.toUpperCase() = "GROUNDHOG DAY"{
    correct = (correct +1);
}

您没有用左括号 ( 和 ) 将条件括起来，它应该是 == 而不是 =

你的变量correct 没有定义

【讨论】：

就我个人而言，我对回答涉及错误代码的问题的想法并不太兴奋，这最终会促进将 SO 用作一种众包的错字检测服务，并且无法鼓励用户学习语法的基础知识并自行调试。此外，当之前已经在 cmets 中指出拼写错误和语法错误作为“答案”时，这似乎很奇怪，恕我直言，这是正确的地方。

【解决方案2】：

您的函数中有两个错误：

if 语句写错了
correct 变量未定义

查看这个对您的代码进行了更正的演示：

http://jsbin.com/fihacawosa/1/

【讨论】：

【解决方案3】：

我认为您在搞乱表单提交按钮和可点击的 div。如果要保留 div，请从 div 中删除 onclick 属性，如下所示：

<div class="quiz">
  <form>
    <h3>DOUGHY DRAGON</h3>
    <h3 class="answers">GROUNDHOG DAY</h3> 
    <input type="text" id="question1" name="q1" placeholder="Movie - 2 Words">
    <br>
    <h3>CORN MAIZE AD</h3>
    <h3 class="answers">CAMERON DIAZ</h3> 
    <input type="text" id="question2" name="q2" placeholder="Actress">
    <br>
    <h3>NEAR BLUNDER</h3>
    <h3 class="answers">BLADE RUNNER</h3> 
    <input type="text" id="question3" name="q3" placeholder="Movie - 2 Words">
    <br>
    <h3>SEVENTH GEAR</h3>
    <h3 class="answers">THE AVENGERS</h3> 
    <input type="text" id="question4" name="q4" placeholder="Movie - 2 Words">
    <br>
    <h3>WORD BOGGLE IHOP</h3>
    <h3 class="answers">WHOOPI GOLDBERG</h3> 
    <input type="text" id="question5" name="q5" placeholder="Actress">
    <br>
  </form>
  <div class="submitbtn" id="submitbutton"></div>
</div>

然后按如下方式更改您的 Javascript 文件：

function markAnswers() {
var correct= 0;
if (document.getElementById('question1').value.toUpperCase() == "GROUNDHOG DAY") {
    correct = (correct + 1);
}

if (document.getElementById('question2').value.toUpperCase() == "CAMERON DIAZ") {
    correct = (correct + 1);
}

if (document.getElementById('question3').value.toUpperCase() == "BLADE RUNNER") {
    correct = (correct + 1);
}

if (document.getElementById('question4').value.toUpperCase() == "THE AVENGERS") {
    correct = (correct + 1);
}

if (document.getElementById('question5').value.toUpperCase() == "WHOOPI GOLDBERG") {
    correct = (correct + 1);
}

switch (correct) {
    case 0:
        alert("You scored 0/5! You weren't even trying!");
        break;
    case 1:
        alert("You scored 1/5! Come on you can do better than that!");
        break;
    case 2:
        alert("You scored 2/5! Well at least you got a couple right!");
        break;
    case 3:
        alert("You scored 3/5! Average...");
        break;
    case 4:
        alert("You scored 4/5! Not bad... Not bad at all!");
        break;
    case 5:
        alert("You scored 5/5!! Perfection!");
        break;
    default:
  

      alert("Ermm... something went wrong. Well this is awkward.");
    }
}
var clickableDiv = documentgetElementById('submitbutton');

clickableDiv.addEventListener('click', function (event) {
    event.preventdefault();
    markAnswers();
});

【讨论】：

【解决方案4】：

您的函数 markAnswers() 未执行，因为代码语法错误。

在编写 JavaScript 条件时，应该这样写：

if (condition) {
   ....
}

而相等条件应该写成：a === b OR a == b

在您的问题中，您已经写了 a = b，这意味着将变量 b 放入 a 中

在您的情况下：您缺少括号并缺少等号

原问题： 如果 document.getElementById('question3').value.toUpperCase() = "BLADE RUNNER" { 正确 = (正确 + 1); }

正确的条件应该写成如下：

if (document.getElementById('question3').value.toUpperCase()) == "BLADE RUNNER" {
    correct = (correct + 1);
}

【讨论】：