带有单选按钮的Javascript警报框_Javascript_Html

带有单选按钮的Javascript警报框

javascript html

带有单选按钮的Javascript警报框,javascript,html,Javascript,Html,我是Javascript的初学者，我有一个问题要问——当没有选择单选按钮时，如何使submit按钮显示警报框？我试了很多次，但似乎都不管用——任何帮助都将不胜感激。多谢各位 <html> <head> <title> Reviewer </title> <style type="text/css"> body { background-image: url("reviewerbackground.jpg"); background-at

我是Javascript的初学者，我有一个问题要问——当没有选择单选按钮时，如何使submit按钮显示警报框？我试了很多次，但似乎都不管用——任何帮助都将不胜感激。多谢各位

<html>
<head>
<title> Reviewer </title>
<style type="text/css">
body
{
background-image: url("reviewerbackground.jpg");
background-attachment: fixed;
font-family: verdana;
color:white;
text-shadow: black 0.1em 0.1em 0.2em;
line-height: 1.5;
font-size: 100%;
}
h1
{
color: white;
font-family: verdana;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
line-height: 1.5;
}
p
{
border: none;
width: 90%;
line-height: 1.5;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
background: tan;
padding: 3px;
text-align: left;
}
</style>

<script type="text/javascript">
function question1() {
   var option = document.querySelector('input[name = "question1"]:checked').value;
   if (option == 'd') {
      alert("That's the correct answer!");
   } 
   else {
      alert ("Oops! try again!");
   }
   }
</script>
</head>
<body link="white" vlink="white">

<br>
<h1> Reviewer  </h1> </br>

<center> 
<p> 1. (Question- Answer will be D, the 4th radio button)
<br>
<br> 
<input type="radio" name="question1" value="a"> choice a
<br>
<input type="radio" name="question1" value="b"> choice b
<br>
<input type="radio" name="question1" value="c"> choice c
<br>
<input type="radio" name="question1" value="d"> choice d
<br>
<br>
<input class="button" type="button" onclick="question1()" name="question1" value="Submit">
</p> </center>
<br>

</body>
</html>


审核人
身体
{
背景图片：url（“reviewerbackground.jpg”）；
背景附件：固定；
字体系列：verdana；
颜色：白色；
文本阴影：黑色0.1em 0.1em 0.2em；
线高：1.5；
字体大小：100%；
}
h1
{
颜色：白色；
字体系列：verdana；
文本阴影：黑色0.1em 0.1em 0.2em；
文本对齐：居中；
线高：1.5；
}
P
{
边界：无；
宽度：90%；
线高：1.5；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
-莫兹盒阴影：0.5pxRGBA（0,0,0,0.5）；
-webkit盒阴影：0.5pxRGBA（0,0,0,0.5）；
盒影：0.5pxRGBA（0,0,0,0.5）；
背景：谭；
填充：3倍；
文本对齐：左对齐；
}
功能问题1（）{
var option=document.querySelector（'input[name=“question1”]：checked'）。值；
如果（选项=='d'）{
警惕（“这是正确的答案！”）；
} 
否则{
警报（“哎呀！再试一次！”）；
}
}


评论员

一,。（问题-答案为D，第四个单选按钮）




选择a


选择b


选择c


选择d

这里有一个简单的问题，在函数的第一行，您已经正确地映射了查询选择器，但是

：checked

需要一个空格才能工作

像这样：

var option = document.querySelector('input[name = "question1"] :checked').value;

试试这个：

 function question1 () {

    var option = getRVBN('question1'); 

    //Check if no radio is selected
    if(option==''){
    alert("No radio button is selected");
    return false;
   }                 

   if (option == 'd') {
      alert("That's the correct answer!");
   } 
   else {
      alert ("Oops! try again!");
   }
}

function getRVBN(rName) {
    var radioButtons = document.getElementsByName(rName);
    for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) return radioButtons[i].value;
    }
    return '';
}

功能问题1（）{
var option=getRVBN（“问题1”）；
//检查是否未选择收音机
如果（选项==''）{
警报（“未选择单选按钮”）；
返回false；
}                 
如果（选项=='d'）{
警惕（“这是正确的答案！”）；
} 
否则{
警报（“哎呀！再试一次！”）；
}
}
函数getRVBN（rName）{
var radioButtons=document.getElementsByName（rName）；
对于（var i=0；i


函数getRVBN（）
来自本文
这是小提琴：