javascript - 输入后如何提交用户输入并删除问题？

Question

我试图弄清楚如何捕获用户对许多问题的输入（仅用于本地目的，不发送到服务器），验证每个答案是否正确，然后删​​除该问题并添加下一个问题回答，等等。我已经尝试了几次，但现在卡住了。我正在使用香草 JS 和 html。

var firstQ = document.getElementById("first-q");
var secondQ = document.getElementById("second-q");
var thirdQ = document.getElementById("third-q");
var field1 = document.getElementById("field-1");
var field2 = document.getElementById("field-2");
var field3 = document.getElementById("field-3");

field1.addEventListener('submit', function(e) {
  e.preventDefault();

  function questionOne() {
    var answer1 = document.getElementById("first-q").value;
    if (answer1.toUpperCase() === "YES" || answer1.toUpperCase() === "YEAH") {
      alert("good answer");
      field1.classList.remove("active");
      field2.classList.add("active");
    } else {
      alert("wrong answer");
    }
  }
  return false;
});

field2.addEventListener("submit", function(e) {
  e.preventDefault();

  function questionTwo() {
    var answer2 = document.getElementById("second-q").value;
    if (answer2.toUpperCase() === "YES" || answer2.toUpperCase() === "YEAH") {
      alert("good answer");
      field2.classList.remove("active");
      field3.classList.add("active");
    } else {
      alert("wrong answer");
    }
  }
  return false;
});

field3.addEventListener("submit", function(e) {
  e.preventDefault();

  function questionThree() {
    var answer3 = document.getElementById("third-q").value;
    if (answer3.toUpperCase() === "YES" || answer3.toUpperCase() === "YEAH") {
      alert("good answer");
      field3.classList.remove("active");
    } else {
      alert("wrong answer");
    }
  }
  return false;
});

<form id="myForm" action="index.html" method="post">
  <fieldset class="active" id="field-1">
    <label>Is the sky blue?</label>
    <input type="text" id="first-q" autocomplete="off">
    <input type="submit" value="Submit Answer">
  </fieldset>
  <fieldset id="field-2">
    <label>Are you a human?</label>
    <input type="text" id="second-q" autocomplete="off">
    <input type="submit" value="Submit Answer">
  </fieldset>
  <fieldset id="field-3">
    <label>Is grass (usually) green?</label>
    <input type="text" id="third-q" autocomplete="off">
    <input type="submit" value="Submit Answer">
  </fieldset>
</form>

标签： javascripthtml

Answer 1

答案有点不同，但实际上代码少了一点，您可以更轻松地添加一堆其他问题和答案，因为它使用的是类而不是 id 和数组作为答案。它应该只隐藏元素。如果您“删除” DOM 元素，可能会中断。

var sets = document.getElementsByClassName('question');

Array.from(sets).forEach(function(value,index) {

	value.querySelector("button").addEventListener('click', function(e){
		e.preventDefault();
  	var answer = this.previousElementSibling.value;
    checkAnswer(index, answer);
		return false;
	});
});

var answerlist = [["YES", "BLUE"], ["YES", "HUMAN"], ["YES", "GREEN"] ];

function checkAnswer(questionnumber, answer) {
	let answers = answerlist[questionnumber];
  let correct = false;
  
  answers.some(function(value,index) {
  	if (answer.toUpperCase() === value || answer.toUpperCase() === value) {
      alert("good answer");
      correct = true;
      return true;
    }
	});
  
	if (correct === false) alert("wrong answer");
  sets[questionnumber].style.display = "none";
  if (questionnumber < sets.length - 1) {
  sets[questionnumber].nextElementSibling.style.display = "block";
  }
  else {
  alert("done");
  }
}

.question {
  display:none;
}
fieldset.active {
  display:block;
}

<form id="myForm" action="index.html" method="post">
<fieldset class="active question">
  <label>Is the sky blue?</label>
  <input type="text" autocomplete="off">  
  <button type="submit" value="Submit Answer">submit answer</button>
</fieldset>
<fieldset class="question">
  <label>Are you a human?</label>
  <input type="text"  autocomplete="off"> 
  <button type="submit" value="Submit Answer">submit answer</button>
</fieldset>
<fieldset class="question">
  <label>Is grass (usually) green?</label>
  <input type="text" autocomplete="off">
  <button type="submit" value="Submit Answer">submit answer</button>
</fieldset>
</form>