Question

<html>
<head>
<title> Algebra Reviewer </title>
<style type="text/css">
h2
{
color: white;
font-family: verdana;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
}
table
{
font-family:verdana;
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>
<script type="text/javascript">
function question1()
{
if ("quiz.question1.value=='d'")
{
alert ("That's the correct answer!");
} 
else
{
alert ("Oops! try again!");
}
}
</script>
</head>
<body>
</br>
<h2>
Here are 10 items for you to answer. You might need scratch paper- so get one before taking this reviewer.
</h2>
</br>
</br>
<center>
<table border="0" bgcolor="tan">
<tr> <td>
<ol>
<li> What is the equation of the line passing through point (3,8) and parallel to the line x - 3y = 5 ? </li>
</br>
</br> 
<input type = "radio" name = "question1" onclick = "quiz.question1.value=='a'"/> y = 1/3 x + 5
</br>
<input type = "radio" name = "question1" onclick = "quiz.question1.value=='b'"/> y = 3x + 7
</br>
<input type = "radio" name = "question1" onclick = "quiz.question1.value=='c'"/> y = 3/5 x + 3
</br>
<input type = "radio" name = "question1" onclick = "quiz.question1.value=='d'"/> y = 1/3 x + 7
</br>
</br>
<input type = "button" onclick = "question1()" name = "question1" value = "Submit"/>
<br/>
<br/>
</td> </tr> </table> </center>
</body>
</html

这里的答案应该是第4个单选按钮，但我认为if / else声明是错误的。

Answer 1

首先，将无线电value属性设置为选项。修改你的html中的以下内容

<input type = "radio" name = "question1" value='a'/> y = 1/3 x + 5
</br>
<input type = "radio" name = "question1" value='b'/> y = 3x + 7
</br>
<input type = "radio" name = "question1" value='c'/> y = 3/5 x + 3
</br>
<input type = "radio" name = "question1" value='d'/> y = 1/3 x + 7

并按如下方式更改功能：

function question1()
{
  var selectedAns;
  var questions = document.getElementsByName("question1");
  for(var i = 0; i < questions.length; i++) {
     if(questions[i].checked == true) {
     selectedAns = questions[i].value;
     break;
  }

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

Answer 2

您从未定义过测验变量。使用value属性获取选定的单选按钮。使用以下代码。

<html>
<head>
<title> Algebra Reviewer </title>
<style type="text/css">
h2 {
   color: white;
   font-family: verdana;
   text-shadow: black 0.1em 0.1em 0.2em;
   text-align: center;
}
table {
   font-family:verdana;
   color: white;
   text-shadow: black 0.1em 0.1em 0.2em;
}
</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>
</br>
<h2>
Here are 10 items for you to answer. You might need scratch paper- so get one before taking this reviewer.
</h2>
</br>
</br>
<center>
<table border="0" bgcolor="tan">
   <tr> 
     <td>
        <ol>
           <li> What is the equation of the line passing through point (3,8) and parallel to the line x - 3y = 5 ? </li>
           </br>
           </br> 
           <input type = "radio" name = "question1" value="a" /> y = 1/3 x + 5
           </br>
           <input type = "radio" name = "question1" value="b" /> y = 3x + 7
           </br>
           <input type = "radio" name = "question1" value="c" /> y = 3/5 x + 3
           </br>
           <input type = "radio" name = "question1" value="d" /> y = 1/3 x + 7
           </br>
           </br>
           <input type = "button" onclick = "question1()" name = "question1" value = "Submit"/>
           <br/>
           <br/>
        </td>
     </tr>
 </table>
</center>
</body>
</html>

Answer 3

您永远不会定义quiz，因此当您尝试将值分配给quiz.question1.value时，代码会抛出错误
您的if语句正在测试字符串是否为真值，它始终是。你的报价太多了。

Answer 4

首先，您缺少表单元素

＆LT;表格名称=＆＃34;测验＆＃34; ＆GT; ... ＆LT; / form＆gt;

这需要您的JavaScript代码才能生效。

name radio buttons的属性和submit button的属性需要不同。

Answer 5

单选按钮和提交按钮的name属性不应该相同。尝试更改提交按钮的name属性。

Answer 6

好的，我通过使用隐藏字段修复了您的问题。为初学者付出的努力。但是，这不是最好的方法。无论如何，保持良好的工作。你会到达那里。

<html>
    <head>
    <title> Algebra Reviewer </title>
    <style type="text/css">
    h2
    {
    color: white;
    font-family: verdana;
    text-shadow: black 0.1em 0.1em 0.2em;
    text-align: center;
    }
    table
    {
    font-family:verdana;
    color: white;
    text-shadow: black 0.1em 0.1em 0.2em;
    }
    </style>
    <script type="text/javascript">

    function question1()
    {
    if (document.getElementById('question1Answer').value =='d')
    {
    alert ("That's the correct answer!");
    } 
    else
    {
    alert ("Oops! try again!");
    document.getElementById('question1Answer').value =''
    }
    }
    </script>
    </head>
    <body>
    </br>
    <h2>
    Here are 10 items for you to answer. You might need scratch paper- so get one before taking this reviewer.
    </h2>
    </br>
    </br>
    <center>
    <table border="0" bgcolor="tan">
    <tr> <td>
    <ol>
    <li> What is the equation of the line passing through point (3,8) and parallel to the line x - 3y = 5 ? </li>
    </br>
    </br> 
    <input type = "radio" name = "question1" onclick = "document.getElementById('question1Answer').value ='a'"/> y = 1/3 x + 5
    </br>
    <input type = "radio" name = "question1" onclick = "document.getElementById('question1Answer').value ='b'"/> y = 3x + 7
    </br>
    <input type = "radio" name = "question1" onclick = "document.getElementById('question1Answer').value ='c'"/> y = 3/5 x + 3
    </br>
    <input type = "radio" name = "question1" onclick = "document.getElementById('question1Answer').value ='d'"/> y = 1/3 x + 7
    </br>
    </br>
    <input type = "hidden" id = "question1Answer" value = ""/>
    <input type = "button" onclick = "question1()" name = "question1" value = "Submit"/>
    <br/>
    <br/>
    </td> </tr> </table> </center>
    </body>
    </html>

如何使用Javascript处理HTML单选按钮？

6 个答案: