Question

我是一个完全的JS新手，他开始执行将测验作为第一个/第二个项目的任务。我想有比我做的更好的方法，但是目前，在正确提交用户之后，我想从数组中删除当前迭代，该迭代通过innerHTML转换为文本，然后执行正确答案/解释也一样。直到最后一刻，它都运作良好。用户完成最后一个问题后，它将再次从数组中删除数据，并在屏幕上显示“未定义”。我发现，通过添加一个if语句来查看array.length> 1是否可以绕开它。我尝试通过使if语句返回true或false，然后在函数上使用&&来避免这种情况。无济于事。这里的所有if语句都会给我错误：

未捕获的ReferenceError：未定义nextQuestion 在SubmitAnswer（VM588 script.js：61）在HTMLButtonElement.onclick（quizpage.html：19）

我在下面附加了html和JS。

var questionsOverview = ["1 - 1+1 = ?", "2 - What food do dieters tend to avoid?", "3 - Best    fast food chain?"];
var answersOverview = ["[A] 1 [B] 3 [C] 2", "[A] Protein [B] Carbs [C] Glucose", "[A] Burger King [B] KFC [C] McDonalds"];
var answersLetter = ["C", "B", "C"];
var score = 0;
var answerUser = "test"

var currentQuestion = questionsOverview[0];

//set buttons as answersLetter
function setRed() {
  document.getElementById(answerUser).style.background = "red";
}
function pressedA() {
  answerUser = "A";
  setRed();
  document.getElementById("B").style.background = "";
  document.getElementById("C").style.background = "";
};

function pressedB() {
  answerUser = "B";
setRed();
document.getElementById("A").style.background = "";
document.getElementById("C").style.background = "";
};

function pressedC() {
  answerUser = "C";
setRed();
document.getElementById("A").style.background = "";
document.getElementById("B").style.background = "";
};

//preps the first question/answer
function changeQuestion() {
  document.getElementById("question").innerHTML = questionsOverview[0];
  document.getElementById("answer").innerHTML = answersOverview[0];
};

//move to the next question
checkForEnd() && function nextQuestion() {
questionsOverview.shift();
answersOverview.shift();
answersLetter.shift();
  changeQuestion();
};

// submit user answer
function submitAnswer() {
  var audio = document.getElementById("tleeni");
  audio.play();
if(answerUser === answersLetter[0]) {
  alert("Correct! You're smart!");
  nextQuestion();
   }
  else {
    alert("Too bad!");
  }
};

function checkForEnd() {
  if (answersOverview.length > 1) {
    return true;
  } else {
    return false;
  }
};

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
    <script src="script.js" type="text/javascript"></script>
  </head>

<body onload="changeQuestion()">
  <div class="top-header" id="header">
  <font color="white">Quiz</font></div>
  <div class="main-content" id="main-content">
    <h2 id="question">1</h2>
    <h3 id="answer">2</h3>
    <h4 id="score>">scorefiller</h4>
    <div id="buttons">
      <button onClick="pressedA()" class="answers" id="A">A</button>
      <button onClick="pressedB()" class="answers" id="B">B</button>
      <button onClick="pressedC()" class="answers" id="C">C</button>
    </div>
    <button onClick="submitAnswer()" id="submit">Submit answer!</button>
  </div>
  <audio id="tleeni" src="submit.mp3"></audio>
</body>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Pacifico');
</style>

鉴于我对编程真的很陌生，我将不胜感激。提前非常感谢您！

Answer 1

我认为您的问题可能在这里

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul id="dropdown">
      <li v-for="d in createdDates"><a href="#" v-on:click.prevent="setDate(d)">{{d}}</a></li>
    </ul>
  </div>

您实际上并不是在调用函数//move to the next question checkForEnd() && function nextQuestion() { questionsOverview.shift(); answersOverview.shift(); answersLetter.shift(); changeQuestion(); };；您只是在进行与nextQuestion等效的布尔检查，因为函数是真实值。

函数声明也“丢失”，因此为什么会出现该引用错误。

checkForEnd() && true

Answer 2

checkForEnd() && function nextQuestion() {}

这不会在您每次单击按钮时运行，也不会在每次调用nextQuestion（）时运行。每当首次加载代码时，它都会执行一次。即使它所做的只是创建一个命名函数表达式，该函数表达式在函数本身之外也无法使用，即，您无法调用nextQuestion()。

您想要的是在函数内使用checkForEnd()并根据该函数返回

function nextQuestion() {
  if(!checkForEnd()) return;
  questionsOverview.shift();
  answersOverview.shift();
  answersLetter.shift();
  changeQuestion();
};

无法使if语句在函数内工作

2 个答案: