时间：2019-07-15 03:38:28

标签： javascript html

我试图弄清楚如何捕获用户对多个问题的输入（仅出于本地目的，不发送给服务器），验证每个答案是否正确，然后删​​除该问题并添加下一个要回答的问题，依此类推。我已经尝试了几次，但现在陷入困境。我正在使用香草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>

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

此功能可以帮助您https://jsfiddle.net/w19nvftL/

CSS 

.hide{
  display:none;
}

HTML 

<form 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">
</form>
<form id="field-2" class="hide">
  <label>Are you a human?</label>
  <input type="text" id="second-q" autocomplete="off"> 
  <input type="submit" value="Submit Answer">
</form>
<form id="field-3" class="hide">
  <label>Is grass (usually) green?</label>
  <input type="text" id="third-q" autocomplete="off">
  <input type="submit" value="Submit Answer">
</form>

<span id="greets" class="hide">Congratulations</span>

JS 

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){
debugger;
e.preventDefault();
  var answer1 = document.getElementById("first-q").value;
  if ( answer1.toUpperCase() === "YES" || answer1.toUpperCase() === "YEAH") {
    alert("good answer");
   field1. classList.add("hide");
    field2.classList.remove("hide");
  } else {
    alert("wrong answer");
  }
return false;
});

field2.addEventListener("submit", function(e) {
  e.preventDefault();
  var answer2 = document.getElementById("second-q").value;
  if ( answer2.toUpperCase() === "YES" || answer2.toUpperCase() === "YEAH") {
    alert("good answer");    
   field2. classList.add("hide");
    field3.classList.remove("hide");
  } else {
    alert("wrong answer");

}
return false;
});

field3.addEventListener("submit", function(e) {
  e.preventDefault();
  var answer3 = document.getElementById("third-q").value;
  if ( answer3.toUpperCase() === "YES" || answer3.toUpperCase() === "YEAH") {
    alert("good answer");

   field3.classList.add("hide");
   document.getElementById("greets").classList.remove("hide");
  } else {
    alert("wrong answer");
  }
return false;
});

答案 2 :(得分：0)

如果您只是想做一个简单的测验，那么我将创建一个构造器，例如QuizMaker。您可以使用它轻松创建自己的小测验。

//<![CDATA[
/* js/external.js */
var doc, bod, I, aC, rC, special, unspecial, QuizMaker;
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
  return doc.getElementById(id);
}
aC = function(element, className){
  var s = element.className.split(/\s+/), n = s.indexOf(className);
  if(n === -1){
    s.push(className); element.className = s.join(' ').trim();
  }
  return function(className, text){
    return aC(element, className, text);
  }
}
rC = function(element, className){
  var s = element.className.split(/\s+/), n = s.indexOf(className);
  if(n !== -1){
    s.splice(n, 1); element.className = s.join(' ').trim();
  }
  return function(className, text){
    return rC(element, className, text);
  }
}
special = function(str){
  return str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
unspecial = function(str){
  return str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}
QuizMaker = function(){
  this.quiz = []; this.questionNum = 0; this.results = [];
  this.qa = function(question, answersArray){
    var o = {question:question, answers:answersArray};
    if(!(answersArray instanceof Array))o.answers = [answersArray];
    this.quiz.push(o);
    return this;
  }
  this.shuffle = function(){
    this.quiz.sort(function(){
      return 0.5 - Math.random();
    });
    return this;
  }
  this.ask = function(){
    var q = this.quiz[this.questionNum];
    if(q === undefined){
      return undefined;
    }
    return q.question;
  }
  this.answer = function(answer){
    var n = this.questionNum++, q = this.quiz[n];
    if(q !== undefined){
      var x = new RegExp(answer, 'i');
      for(var i=0,r=false,a=q.answers,l=a.length; i<l; i++){
        if(a[i].toString().match(x)){
          r = true; break;
        }
      }
      this.results.push({question:n, answer:answer, correct:r});
    }
    return this;
  }
  this.reset = function(){
    this.questionNum = 0; this.results.splice(0);
    return this;
  }
}
var qz = new QuizMaker, quiz = I('quiz'), question = I('question'), answer = I('answer'), next = I('next'), out = I('out'), output = I('output');
var retake = I('retake'), asked, res = [], complete;
qz.qa('How many feet in a mile?', 5280).qa('How many teaspoons in a tablespoon?', 3).qa('How many inches in a yard?', 36).qa('If you were going down the road at 60 miles per hour, how long would it take to go one mile?', ['One minute', '1 minute', '1 min']).shuffle();
question.innerHTML = special(qz.ask());
function goNext(){
  if(complete){
    return false;
  }
  qz.answer(answer.value.trim()); answer.value = ''; asked = qz.ask();
  if(asked === undefined){
    qz.results.forEach(function(o, i){
      res.push(i+1+': '+special(qz.quiz[o.question].question)+'<br />'+special(o.answer)+' = '+o.correct);
    });
    output.innerHTML = res.join('<hr />'); aC(quiz, 'hide'); rC(out, 'hide'); complete = true;
  }
  else{
    question.innerHTML = special(asked);
  }
}
next.onclick = goNext;
answer.onkeyup = function(e){
  if(e.key === 'Enter')goNext();
}
retake.onclick = function(){
  qz.reset().shuffle(); complete = false; question.innerHTML = special(qz.ask()); aC(out, 'hide'); rC(quiz, 'hide'); res.splice(0);
}
}); // end load
//]]>
/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  position:relative; background:#ccc;
}
#content{
  padding:7px;
}
input[type=text]{
  width:calc(100% - 54px); padding:5px; border:0; border-radius:5px;
}
#next{
  margin-left:4px;
}
input[type=button]{
  cursor:pointer; padding:5px 7px;
}
#next{
  width:50px;
}
#content>*{
  margin-bottom:4px;
}
.hide{
  display:none;
}
#retake{
 display:block; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='content'>
    <div class='hide' id='out'><div id='output'></div><input id='retake' type='button' value='retake' /></div>
    <div id='quiz'>
      <div id='question'></div>
      <input id='answer' type='text' value='' /><input id='next' type='button' value='next' />
    </div>
  </div>
</body>
</html>

相关问题
最新问题