JavaScript問答題

Question

下面，我對4個問題進行了小測驗，而問題2,3和4已被CSS隱藏，但是您可以嘗試從CSS中刪除樣式(".pytja2, .pytja3, .pytja4 { display: none;}")以查看所有問題或采用一種display: hidden每個問題一個一個地display: hidden ，您將看到它們。

我這樣做，是因為我想顯示下一個問題，當我點擊按鈕， 下一步 ，然后下一個問題將展示后，我點擊下一步按鈕每次。 但是問題2沒有顯示，控制台日志中沒有顯示任何錯誤，我在JavaScript上添加了一個函數，當我單擊按鈕“下一步”時，第一個問題將被隱藏，並顯示下一個問題，但我不知道怎么了。

<div class="quiz">
        <div id="pytja1">
         <span class="quest1">I am a ?</span> 
        <form class="questions1" action="">
          <input class="correct" type="radio" name="gender" value="male"> Male<br>
          <input type="radio" name="gender" value="female"> Female<br>
          <input type="radio" name="gender" value="other"> Other<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja2">
        <span class="quest2">Football has letters ?</span> 
        <form class="questions2" action="">
          <input class="correct" type="radio" name="gender" value="male"> 7<br>
          <input type="radio" name="gender" value="female"> 5<br>
          <input type="radio" name="gender" value="other"> 6<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja3">
        <span class="quest3">VV stands for ?</span> 
        <form class="questions3" action="">
          <input type="radio" name="gender" value="male"> BMW <br>
          <input class="correct" type="radio" name="gender" value="female"> Volksvagen<br>
          <input type="radio" name="gender" value="other"> Audi<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja4">
        <span class="quest4">What year it is ?</span> 
        <form class="questions4" action="">
          <input type="radio" name="gender" value="male"> 2017<br>
          <input type="radio" name="gender" value="female"> 2015<br>
          <input class="correct" type="radio" name="gender" value="other"> 2019<br>  
          <input id="bot-submit" type="submit" value="Submit">
        </form>
      </div>
      </div>

.quiz{
  margin-top: 50px;
  margin-left: 40%;
  width: 250px;
  height: 100px;
  background-color: coral;
}
.quest1{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
}
.quest2{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.quest3{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.quest4{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.questions1{
  margin-left: 28px;
  background-color: cyan;
  width: 220px;
  padding: 10px;
  font-size: 20px;
}
.questions2{
  margin-left: 28px;
  background-color: red;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.questions3{
  margin-left: 28px;
  background-color: greenyellow;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.questions4{
  margin-left: 28px;
  background-color: olivedrab;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.bot{
  margin-top: 10px;
}
.pytja2,.pytja3,.pytja4{
  display: none;
}
/* End of Quiz*/

let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let nextQuestion = document.getElementById('bot');
let result = document.getElementById('bot-submit');


nextQuestion.onclick = function () {
    if (nextQuestion === question1) {
        question1.style.display = 'none'
    } else if (nextQuestion === question2) {
        question2.style.display = 'block'
   }
}

Answer 1

因此，您在代碼中使用bot作為ID和CLASS選擇器似乎有些困惑。 我.bot清理並制作它，因此“下一步”按鈕使用.bot作為class 。 如果要在元素上重用名稱值，則class是要使用的語法。 ID應該特定於DOM中的一個元素。

另外，如果您要創建一個提交所有答案的表格，最好先聲明一次<form> ，然后讓每組單選按鈕為每組問題包含相同的名稱，例如（性別，汽車等）。因此，當您處理表單時，將很容易抓住用戶為每組問題選擇的選項。

我還清理了一些CSS來提供幫助，並添加了一個for循環，該循環將onclick函數綁定到表單中的每個Next button ，因此，每次單擊時，它將檢查parentNode.Id以查看應隱藏哪些div元素並使每個下一個問題塊可見。 通過使用document.querySelectorAll('.bot');引用類.bot來實現此for循環document.querySelectorAll('.bot');

如果您還有其他問題，或者需要我進一步解釋我在以下代碼段中所做的更改，請告訴我：

 let question1 = document.getElementById('pytja1'); let question2 = document.getElementById('pytja2'); let question3 = document.getElementById('pytja3'); let question4 = document.getElementById('pytja4'); let result = document.getElementById('bot-submit'); let nextButtons = document.querySelectorAll('.bot'); for (let i = 0; i < nextButtons.length; i++) { let nextQuestion = nextButtons[i]; nextQuestion.onclick = function() { switchToNextQuestion(this); } } function switchToNextQuestion(nextQuestion) { let parentId = nextQuestion.parentNode.id; if (parentId === 'pytja1') { question1.style.display = 'none'; question2.style.display = 'block'; } else if (parentId === 'pytja2') { question2.style.display = 'none'; question3.style.display = 'block'; } else if (parentId === 'pytja3') { question3.style.display = 'none'; question4.style.display = 'block'; } } result.onclick = function() { alert('I am submitting the quiz!'); } 

 form { width: 100%; position: relative; float: left; padding-top: 50px; } .quiz { margin: 0px auto; width: 250px; height: 100px; } .quest1, .quest2, .quest3, .quest4 { background-color: cadetblue; font-size: 22px; } .questions1 { margin-left: 28px; background-color: cyan; width: 220px; padding: 10px; font-size: 20px; } .questions2 { background-color: red; } .questions3 { background-color: greenyellow; } .questions4 { background-color: olivedrab; } .bot { margin-top: 10px; } #pytja2, #pytja3, #pytja4 { margin-left: 28px; display: none; width: 220px; padding: 10px; font-size: 20px; } /* End of Quiz*/ 

 <form id="quiz-form"> <div class="quiz"> <div id="pytja1" class="questions1"> <span class="quest1">I am a ?</span><br/> <input type="radio" name="gender" value="male" class="correct"> Male<br/> <input type="radio" name="gender" value="female"> Female<br/> <input type="radio" name="gender" value="other"> Other<br/> <input class="bot" type="button" value="Next" /> </div> <div id="pytja2" class="questions2"> <span class="quest2">Football has # letters ?</span><br/> <input type="radio" name="football" value="8" class="correct"> 8<br/> <input type="radio" name="football" value="5"> 5<br/> <input type="radio" name="football" value="6"> 6<br/> <input class="bot" type="button" value="Next" /> </div> <div id="pytja3" class="questions3"> <span class="quest3">VW stands for ?</span><br/> <input type="radio" name="car" value="BMW" /> BMW <br/> <input type="radio" name="car" value="Volkswagen" class="correct" /> Volkswagen<br/> <input type="radio" name="car" value="Audi" /> Audi<br/> <input class="bot" type="button" value="Next" /> </div> <div id="pytja4" class="questions4"> <span class="quest4">What year it is ?</span><br/> <input type="radio" name="year" value="2017" /> 2017<br/> <input type="radio" name="year" value="2015" /> 2015<br/> <input type="radio" name="year" value="2019" class="correct" /> 2019<br/> <input id="bot-submit" type="submit" value="Submit" /> </div> </div> </form>