Question

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Exercises</title>
<style type="text/css">
body {
        font-family:Verdana, Geneva, sans-serif; 
    font-size:100%;
    margin:0;
    padding:0;
}
p {
    color:#900;
    margin-left:20px;
}
fieldset {
    border-color: #FFF;
    border-radius: 15px;
}
div#results {
    background-color:#FF6;
    height:auto;
    width:500px;
    border:1px solid red;
    padding:10px;
    margin-left:20px;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    border-radius:7px;

}
div#more {
    background-color: #39F;
    height:auto;
    width:500px;
    border:1px solid #036;
    padding:10px;
    margin-left:20px;
    margin-top:20px;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    color:#CF0;

}
#form1
{
    padding: 10px;
    width: 500px;
    border-style: solid;
    border-color: #063;
    border-radius: 15px;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #CFF;
    margin:20px;
}
</style>
<script type="text/javascript">
function validateForm1() //function called validateForm1 is associated with the
Submit button at the bottom of the form. NOTICE that the button element is a
type=button NOT a type=submit
{ 
  var message; //this variable is going to be for your first message
  var checkValue; // this variable is going to be for the value of your radio group
  var fname = document.form1.firstName;//equal to the value of your name field --
create code here
  var yage = document.form1.yourAge;//equal to the value of your age field -- create
code here

  if (fname.value=="") {  //if the name field is null -- create code here
    message = "Hey, you forgot to fill in your name!"; //message value will be
this string
    document.getElementById("results").innerHTML = message; //element called
results is a division at the bottom of the page where the message will be displayed
    document.form1.firstName.focus(); //refocus the cursor to the name field
    return;
    } else {
      message = ""; //if the name field is not null, no message will be generated
       document.getElementById("results").innerHTML = message;
   }
  if (yage.value=="") { //if the age field is null -- create code here
    message = "Your age is required!"; //message value will be this string
    document.getElementById("results").innerHTML += "<br>"+message; //element
called results is a division at the bottom of the page where the message will be
displayed
    document.form1.yourAge.focus(); //refocus the cursor to the age field
    return;

    } else if(isNaN(yage.value)) { //if the input of the age field is not a number
-- create code here
      message = "Your age is supposed to be a number, please enter a number!";
//message value will be this string
      document.getElementById("results").innerHTML += "<br>"+message; //element called 
results is a division at the bottom of the page where the message will be displayed
      document.form1.yourAge.focus(); //refocus the cursor to the age field
      return;
    }else if(yage.value < 10 || yage.value > 100) { //if the age field is less
than 10 or greater than 100 -- create code here
      message = "You know, I do not believe your age is correct!"; //message value
will be this string
      document.getElementById("results").innerHTML += "<br>"+message; //element 
called results is a division at the bottom of the page where the message will be 
displayed
      document.form1.yourAge.focus(); //refocus the cursor to the age field
      return;
    } else { //when all validations for name and age are clear
      message = fname.value + " you are " + yage.value + ". Welcome!"; //message that is generated if the name and age fields are validated
      document.getElementById("results").innerHTML = message; //output message to div called results
    }
    var radiogrp = document.form1.skilltype.length; //create a variable to the radio group -- create code here
for(var i=0; i<radiogrp; i++) //loop through to check to see if a radio button was selected -- create code here
{

这里的文字是我遇到问题的代码区域我试图让它选择什么类型，但是现在当没有选择任何无线电时它工作，当你选择一个它说没有。 if（document.form1.skilltype [i] .checked）{//在这里创建代码
checkValue = document.form1.skilltype [i] .value; //在这里创建代码 } } if（checkValue == radiogrp [0]）{//如果选择了单选按钮，则创建以下消息 - 在此处创建代码 st_message =“Wow a”+ checkValue +“，那个摇滚！”; //消息生成 document.getElementById（“more”）。innerHTML = st_message; //在div中显示的消息称为more } else {//如果没有选择单选按钮 var st_message =“你没有选择技能！”; //生成此消息 document.getElementById（“more”）。innerHTML = st_message; //在名为more的div中显示此消息 }

message = ""; //clear out your message variables so old data does not linger
st_message = "";
}
</script>
</head>
<body>

<form name="form1" id="form1" action="#" method="post" type="radio">
<fieldset>
  <div style="float:left"><strong>First Name:</div>
  <div style="float:right; margin-right:150px"></strong><input type="text" name="firstName" id="firstName" /></div>
  <div style="clear:both"></div>
  <div style="float:left"><strong>Your Age:</strong></div>
  <div style="float:right; margin-right:150px"><input type="Text" name="yourAge" id="yourAge" /></div>
  <div style="clear:both"></div><br />
  <center>
  <label><input type="radio" name="skilltype" value="Designer" id="skilltype_0" /><strong>Designer</strong></label>
  <label><input type="radio" name="skilltype" value="Developer" id="skilltype_1" /><strong>Developer</strong></label>
  <label><input type="radio" name="skilltype" value="Programmer" id="skilltype_2" /><strong>Programmer</strong></label>
  <label><input type="radio" name="skilltype" value="Artist" id="skilltype_3" /><strong>Artist</strong></label>
  </center>
</fieldset>
  <br />
  <center>
  <input type="button" value="Submit" onClick="validateForm1()" />
  <input type="reset" value="Clear Form" />
  </center>
</form>
<div id="results"></div>
<div id="more"></div>
</body>
</html>

Answer 1

 if (checkValue== radiogrp[0])

那不对。你已经将radiogrp定义为：

var radiogrp = document.form1.skilltype.length;

所以radiogrp [0]是......好吧，它不会起作用。

尝试切换if / else并检查未定义的检查值：

if (typeof(checkValue)=='undefined') {
    var st_message = "You did not select a skill!"; 
    document.getElementById("more").innerHTML = st_message;
    message = "";
    st_message = "";
} else {  
    st_message = "Wow a " + checkValue + ", that rocks!"; 
    document.getElementById("more").innerHTML= st_message;  
}

试图让无线电组的验证工作正确，但我似乎倒退了

1 个答案: