Javascript-我可以'我没有发现我的错误.(单选按钮）

Javascript - I can't find my mistake.(radio buttons)

本文关键字：我的 发现 错误 单选按钮 我可以 Javascript-      更新时间：2023-09-26

我想创建一个在线测试，但我的第一个问题有问题。下面的代码不起作用，即使检查了正确的答案，也会返回"你的分数为0"。

<!DOCTYPE html>
<html>sssdsdsdsd
<head>Mypage.com
<title> myPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
var total=0;
var yourmark="your score is  ";
if(document.getElementById('q12').checked) {
  total=total+1;
}else {
 total=total;
}
</script>
<script>
function showScore() {
    alert(yourmark + total  );
}
</script>
</br>
<input type="radio" name="question1" id="q11" value="false">Question 1-first option <br>
<input type="radio" name="question1" id="q12"  value="true" > Question 1- second option<br>
<input type="radio" name="question1" value="false">Question 1- third option<br>
<button onclick="showScore()">Show my score</button>
</body>
</html>

列出了事情没有按您的意愿运行的直接原因。

  1. 在分析和呈现元素之前，您可以设置总和的值。HTML将从上到下进行解析。因此，您希望将脚本移到底部。

  2. 如果需要在标记中设置选项框的值，请使用checked而不是value属性。

你应该有类似下面的片段

<!DOCTYPE html>
<html>sssdsdsdsd
<head>Mypage.com
<title> myPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
function showScore() {
    alert(yourmark + total  );
}
</script>
</br>
<input type="radio" name="question1" id="q11">Question 1-first option <br>
<input type="radio" name="question1" id="q12"  checked="true" > Question 1- second option<br>
<input type="radio" name="question1">Question 1- third option<br>
<button onclick="showScore()">Show my score</button>
<script>
var total=0;
var yourmark="your score is  ";
if(document.getElementById('q12').checked) {
  total=total+1;
}else {
 total=total;
}
</script>
</body>
</html>

http://codepen.io/anon/pen/vgJuA

因此，将var total=0作为函数外的全局变量，并创建一个函数checkAnswer()。您的javascript部分现在将是：

var total = 0;    
function checkAnswer() {
    //total is the global Variable for the score
    if (document.getElementById('q12').checked) {
        total = total + 1;
    } else {
        total = total;
    }
    return total;    
}
function showScore() {
    var yourmark = "your score is  ";
    alert(yourmark + checkAnswer());
}

希望它能有所帮助！

此块：

var total=0;
var yourmark="your score is  ";
if(document.getElementById('q12').checked) {
  total=total+1;
}else {
 total=total;
}

在加载时在页面的开头运行。在这一点上total实际上是0。当您单击该按钮时，您所要求的只是更改选项后的"总计. At no point are you updating the value of总计"值。

正如PM 77-1所建议的，最简单的解决方案是将计算移动到函数内部，以便每次需要更新答案时都会计算total。

<!DOCTYPE html>
<html>sssdsdsdsd
<head>Mypage.com
<title> myPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
function showScore() {
  var total=0;
  var yourmark="your score is  ";
  if(document.getElementById('q12').checked) {
    total=total+1;
  }else {
   total=total;
  }
  
  alert(yourmark + total  );
}
</script>
</br>
<input type="radio" name="question1" id="q11" value="false">Question 1-first option <br>
<input type="radio" name="question1" id="q12"  value="true" > Question 1- second option<br>
<input type="radio" name="question1" value="false">Question 1- third option<br>
<button onclick="showScore()">Show my score</button>
</body>
</html>

相关文章：