在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"
  }
};

注意!

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



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