Question

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

＆＃13;

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

＆＃13;

.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');
}

＆＃13;

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

＆＃13;

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

Answer 1

请正确检查条件陈述：

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

而不是：

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

您没有使用左括号(和)打开条件，它应该是==而不是=

您的变量correct未定义

Answer 2

我认为你正在搞乱表单提交按钮和可点击的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文件：

＆＃13;

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();
});

＆＃13;

Answer 3

您的功能有两个错误：

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

查看此示例，其中包含您的代码更正：

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

Answer 4

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

编写JavaScript条件时，应按如下方式编写：

if (condition) {
   ....
}

虽然平等条件应写为：a === b OR a == b

在你的问题中，你写了一个= b，这意味着将变量b放在

中

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

原始问题： if document.getElementById（＆＃39; question3＆＃39;）。value.toUpperCase（）=＆＃34; BLADE RUNNER＆＃34; { correct =（正确+ 1）; }

正确的条件应写如下：

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

Javascript函数似乎没有运行？

4 个答案: