在javascript中创建多项选择

[英]Creating a multiple choice option in javascript


I have created an HTML multiple choice question. I am facing a problem how to validate it. Below is the html code:

我创建了一个HTML多项选择题。我正面临着如何验证它的问题。以下是html代码:

   
<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button>Submit Answer</button> 

If the user clicks the submit button without selecting any option, an alert box should be say "please select choice answer". If the user clicks the submit button selecting the "Scripting" option, an alert box should be say "Answer is correct !" If the user clicks the submit button selecting an option different from "Scripting" an alert box should be say "Answer is wrong". Please help me code this by using JavaScript.

如果用户在未选择任何选项的情况下单击提交按钮,则应提示“请选择选择答案”。如果用户单击“提交”按钮选择“脚本”选项,则应该显示一个警告框“答案是正确的!”如果用户单击“提交”按钮,选择与“脚本”不同的选项,则应该说“答案错误”。请帮我用JavaScript编写代码。

5 个解决方案

#1


4  

Here you go! I have also attached some comments.

干得好!我还附上了一些评论。

https://jsbin.com/mobesaqiba/edit?html,js,console,output

#2


3  

You have to use onclick attribute and more js

您必须使用onclick属性和更多js

  1. attach event hander to your button
  2. 将事件处理程序附加到您的按钮

  3. get radio elements value
  4. 获得无线电元素价值

  5. compare

var submitAnswer = function() {

  var radios = document.getElementsByName('choice');
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }
  
  if (val == "" ) {
    alert('please select choice answer');
  } else if ( val == "Scripting" ) {
    alert('Answer is correct !');
  } else {
    alert('Answer is wrong');
  }
};
<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer()">Submit Answer</button>

#3


1  

Use the required keyword. This prompts the user to choose a value, when the submit button is pressed without choosing any option. And always prefer to use

使用必需的关键字。这会提示用户在按下提交按钮时选择一个值而不选择任何选项。而且总是喜欢使用

<input type="submit" value="submit"> over <button>Submit Answer</button>

over

while handling forms. Use the onclick() event handler to call your Javascript code.

处理表格时。使用onclick()事件处理程序来调用您的Javascript代码。

<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting" required> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<input type="submit" value="submit" onclick="validate()">
</form>

And the javascript part is as follows.

而javascript部分如下。

<script type="text/javascript">
function validate() {
 var a= document.getElementByName("choice");
 for (var i = 0, i < a.length; i++) {
   if (a[i].checked) {
     if( a[i].value == "scripting" )
        alert("your answer is correct");
     else
        alert("your answer is not correct");
     break;
   } } }   
</script>

#4


1  

var submitAnswer = function() {

  var radios = document.getElementsByName('choice');
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }
  
  if (val == "" ) {
    alert('please select choice answer');
  } else if ( val == "Scripting" ) {
    alert('Answer is correct !');
  } else {
    alert('Answer is wrong');
  }
};
<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer()">Submit Answer</button>

Some changes

I made some changes to the code above to make it more 'abstract'

我对上面的代码做了一些修改,使它更“抽象”

<h1>JavaScript is ______ Language.</h1><br>
<form id="d1">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer(d1.choice.value, 'Scripting')">Submit Answer</button>

<script>
var submitAnswer = function(valore, rightanswer) {
if (valore == rightanswer) {
    alert("OK");
}
};
</script>

Another, more complex example

<div style="background-color:lightblue">
<h1>JavaScript is a <span id='a1'>______</span> Language.</h1><br>
<form id="d1">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<br>
<input type="submit" value="submit" onclick="validate(choice.value, 'Scripting', 'd1','a1')">
</form>
</div>
<div style="background-color:lightblue">
<h1>Python is a <span id='a2'>______</span> Language.</h1><br>
<form id="d2">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Wonderful"> Wonderful
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<br>
<input type="submit" value="submit" onclick="validate(choice.value, 'Wonderful', 'd2', 'a2')">
</form>
</div>

<script>
var validate = function(valore, rightanswer, form, span) {

var formname = document.getElementById(form)
var spanname = document.getElementById(span)

    spanname.innerHTML = rightanswer;

if (valore == rightanswer) {
    formname.innerHTML ="<div style='background-color:lightgreen'><h1>GREAT! YOU'RE RIGHT: The answer, in fact, was: " + rightanswer + "</h1></div>";
}
else {

    formname.innerHTML ="<div style='background-color:pink'><h1>Sorry, you where wrong: The answer was: " + rightanswer + "</h1></div>";
}
};
</script>

#5


0  

Here condition is showing in alert pop up box. but I want to show it in a html tag. But after clicking submit button, innerHTML content showing a millisecond and then automatic remove the content. How selection will stay in innerHTML

此条件显示在警告弹出框中。但我想在一个html标签中显示它。但点击提交按钮后,innerHTML内容显示毫秒,然后自动删除内容。选择将如何保留在innerHTML中

document.getElementById("answer").innerHTML;
var submitAnswer = function() {

  var radios = document.getElementsByName('choice');
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }

  if (val == "" ) {
    document.getElementById("answer").innerHTML = "please select choice answer";
  } else if ( val == "Scripting" ) {
    document.getElementById("answer").innerHTML = "Answer is correct !"
  } else {
    document.getElementById("answer").innerHTML = "Answer is wrong"
  }
};
智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2015/12/04/7df056c9cb2c4ecbd7cf23a803714527.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告