时间戳

首页 > 解决方案 > HTML/Javascript 单选按钮测验

javascript - HTML/Javascript 单选按钮测验

问题描述

我正在尝试验证单选按钮，以便在未选中时弹出错误。

但是，除非我从问题 2 集中选择一个选项，而从问题 1 中选择一个选项，否则错误不会消失。

如果未选中，我正在尝试为这两个问题弹出两个消息，并在为该问题选择某些内容时单独消失

//Javascript

    var answers = ["A","C"], 
        total = answers.length;
    
    
    function getCheckedValue(radioName)
    {
        var radios = document.getElementsByName(radioName);
    	var errorSpan = document.getElementById("choice_error");
    	var isChecked = false;
    	
    	errorSpan.innerHTML = "";
    	
    	for (var y = 0; y < radios.length; y++)
    	{
          if(radios[y].checked)
    	  {
    		  isChecked = true;
    		  return radios[y].value
    	  }
    	  else if(!radios[y].checked)
    	  {
    		  isChecked = false;
    		  errorSpan.innerHTML = "Please select a choice.";
    	  }
    	}
    	
    	return isChecked;
    	
    }
    
    function getScore()
    {
      var score = 0;
      
      for (var i = 0; i < total; i++)
      {
    	  document.getElementById("flag"+i).innerHTML = "";
    	  if(getCheckedValue("choice"+i) == answers[i])
    	  {
    		  score += 1;
    		  document.getElementById("flag"+i).innerHTML = "Your answer is correct.";
    	  }
    	  else if(getCheckedValue("choice"+i) != answers[i])
    	  {
    		  document.getElementById("flag"+i).innerHTML = "Your answer is incorrect.";
    	  }
    	  
    	
      }
      
      
      return score;
    }
    
    function returnScore()
    {
    	var x = document.getElementById("myText").value;
    	document.getElementById("results").innerHTML = x + ", your score is " + getScore() + "/" + total;
    }
<!--HTML -->

    <!DOCTYPE html>
    <html lang="en"> 
    <head>        
    <title>Disney Quiz</title>
    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <script src="scripts/quiz.js"></script>
    </head>
    
    <body>    
    <header><h1>Disney Quiz</h1></header>
    
    <main>
    
    <p>Click on the correct answer for each question and submit your results.</p>
    
    <form>
            <fieldset>
    	       <legend>Trivia Questions</legend>
    		   <label> Enter your Name</label> <input type="text" id="myText" name="fieldName" placeholder="First Last"value=""><br>
    		    <section id="radio1">
    				<p> Question 1) What was Walt Disney's first character he created? <span id="choice_error"></span></p>
    				<input type="radio" name="choice0" value="A">Oswald the Lucky Rabbit<br>
    				<input type="radio" name="choice0" value="B">Donald Duck<br>
    				<input type="radio" name="choice0" value="C">Mickey Mouse<br>
    				<input type="radio" name="choice0" value="D">Goofy<br>
    				<p id="flag0"></p>
    			</section>
    			<section id="radio2">
    				<p> Question 2) Snow White was the first ____ to ever be produced successfully. <span id="choice_error"></span></p></p>
    				<input type="radio" name="choice1" value="A">Movie<br>
    				<input type="radio" name="choice1" value="B">Live-Action<br>
    				<input type="radio" name="choice1" value="C">Cel-animated Film<br>
    				<input type="radio" name="choice1" value="D">Cartoon<br>
    				<p id="flag1"><p>
    			</section>
    				 <br>
    				 
    			<input type="button" onclick="returnScore()" value="Show Results">
    			<input type="button" onclick="window.location.href = 'index.html';" value="Review">
    			<p id="results"></p>
             </fieldset>
           </form>
    </main>
    <aside>
    
    </aside>
    <footer>    <p align="center">  Project 4 - Fall 2018  </p>  </footer>    
    </body>
    </html>

标签： javascripthtml

解决方案

在您的代码中，两个错误范围都具有相同的 ID“choice_error”。没有两个 html 元素应该具有相同的 id，因为这样浏览器将无法区分它们。

如果你想访问两个错误跨度元素，你可以给每个元素一个 ccs 类“choice_error”并调用方法 document.getElementsByClassName()。

您还需要清除循环内的错误范围

function getCheckedValue(radioName)
{
    var radios = document.getElementsByName(radioName);
    var errorSpans = document.getElementsByClassName("choise_error");
    var isChecked = false;



    for (var y = 0; y < radios.length; y++)
    {
      errorSpans[y].innerHTML= ""; // clear the span
      if(radios[y].checked)
      {
          isChecked = true;
          return radios[y].value
      }
      else if(!radios[y].checked)
      {
          isChecked = false;
          errorSpans[y].innerHTML = "Please select a choice."; // error message
      }
    }

    return isChecked;

}

推荐阅读