Question

console.log（分数）不会打印到控制台。我试图将其放置在form标签之外以及其他任何地方，但仍然没有任何打印内容

const correctAnswers = ['B', 'B', 'B', 'B'];

const form = document.querySelector('.quiz-form');


form.addEventListener('submit', e => {
  e.preventDefault();

  let score = 0;
  const userAnswers = [form.q1.value, form.q2.value, form.q3.value, form.q4.value];

  //check answers
  userAnswers.forEach((answer, index) => {
    if (answer === correctAnswers[index]) {
      score += 25;
    }
  });
  console.log(score);

});

<form class="quiz-form text-light">
  <div class="my-5">
    <p class="lead font-weight-normal">1.How do you give a ninja directions?</p>
    <div class="form-check my-2 text-white-50">
      <input type="radio" name="q1" value="A" checked>
      <label class="form-check-label">Show them a map</label>
    </div>
    <div class="form-check my-2 text-white-50">
      <input type="radio" name="q1" value="B">
      <label class="form-check-label">A ninja will find you</label>
    </div>
  </div>
  <!--second-->
  <div class="my-5">
    <p class="lead font-weight-normal">2.If a ninja has three apples and give one away, how many does he have?</p>
    <div class="form-check my-2 text-white-50">
      <input type="radio" name="q2" value="A" checked>
      <label class="form-check-label">one apple</label>
    </div>
    <div class="form-check my-2 text-white-50">
      <input type="radio" name="q2" value="B">
      <label class="form-check-label">two apples</label>
    </div>
  </div>
  <!--end of second-->

Answer 1

您有一个“提交”侦听器，因此需要一个“提交”事件来触发它（例如来自<input type="submit" />的事件）。

在示例代码中，由于没有q3和q4，因此我从userAnswers数组中将它们注释掉了。

已编辑：
如果您想立即以及在提交表单时都记录分数，则只需命名该函数（在这里我将其命名为printScore），然后在两种情况下都按名称调用它。

const correctAnswers = ['B', 'B', 'B', 'B'];
const form = document.querySelector('.quiz-form');

form.addEventListener('submit', printScore); // Calls printScore when form is submitted
printScore(); // Calls printScore once immediately

function printScore(e){
  
  // Skips the call to preventDefault for the initial call
  if(e){ e.preventDefault(); }
  
  let score = 0;
  const userAnswers = [form.q1.value, form.q2.value //, form.q3.value, form.q4.value
  ];
  //check answers
  userAnswers.forEach((answer, index) => {
    if (answer === correctAnswers[index]) {
      score += 25;
    }
  });

  // Helps make sure the browser will log something even if it's `0` 
  let scoreString = "" + score;
  console.log("current score: " + scoreString);
};

<form class="quiz-form text-light">

  <div class="my-5">
    <p class="lead font-weight-normal">1.How do you give a ninja directions?</p>
    <div class="form-check my-2 text-white-50">
      <input type="radio" name="q1" value="A" checked>
      <label class="form-check-label">Show them a map</label>
    </div>
    <div class="form-check my-2 text-white-50">
      <input type="radio" name="q1" value="B">
      <label class="form-check-label">A ninja will find you</label>
    </div>
  </div>

  <div class="my-5">
    <p class="lead font-weight-normal">2.If a ninja has three apples and give one away, how many does he have?</p>
    <div class="form-check my-2 text-white-50">
      <input type="radio" name="q2" value="A" checked>
      <label class="form-check-label">one apple</label>
    </div>
    <div class="form-check my-2 text-white-50">
      <input type="radio" name="q2" value="B">
      <label class="form-check-label">two apples</label>
    </div>
  </div>
  
   <input type="submit" value="submit" />

</form>

为什么这不将console.log（score）打印到控制台？

1 个答案: