单选按钮（Radio Button）值不显示：测验代码故障排查求助

你遇到的核心问题是：单选按钮（<input type="radio">）属于表单输入控件，它本身不支持通过innerHTML添加显示文本。这类元素的作用是提供选择交互，文本内容需要通过<label>标签或者相邻的文本节点来展示，直接给radio元素设置innerHTML不会被浏览器渲染出来。

我们需要调整HTML结构，给每个单选按钮搭配对应的文本容器，然后通过JS来更新这些容器的内容。下面是两种可行的修改方案：

方案1：使用<label>关联单选按钮（推荐） #

这种方式更符合语义化，而且点击标签也能选中对应的单选按钮，提升用户体验。

修改后的HTML代码 #

<!doctype html>
<html>
<head>
<title> Ques and Ans </title>
<link rel="stylesheet" type="text/css" href="qa.css">
</head>
<body>
<div id="container">
<header>
<div class="header_mid">
<h1>BitsBridge</h1>
</div>
</header><br>
<div id="main">
<div id="ques"></div><br>
<div>
<input type="radio" id="opt1" name="options">
<!-- 添加label标签，for属性对应radio的id -->
<label for="opt1" id="opt1-label"></label>
</div><br>
<div>
<input type="radio" id="opt2" name="options">
<label for="opt2" id="opt2-label"></label>
</div><br>
<div>
<input type="radio" id="opt3" name="options">
<label for="opt3" id="opt3-label"></label>
</div><br>
<div>
<input type="radio" id="opt4" name="options">
<label for="opt4" id="opt4-label"></label>
</div><br>
</div>
</div>
<script type="text/javascript" src="qa.js"></script>
<button class="submit" id="sub">Next</button>
</body>
</html>

修改后的JS代码 #

var questions=[ 
  { "q":"1.what is what?", "a":"aaa", "b":"bbb", "c":"ccc", "d":"ddd", "answer":"aaa" }, 
  { "q":"2.what is what?", "a":"aaa", "b":"bbb", "c":"ccc", "d":"ddd", "answer":"bbb" }, 
  { "q":"3.what is what?", "a":"aaa", "b":"bbb", "c":"ccc", "d":"ddd", "answer":"ccc" }, 
  { "q":"4.what is what?", "a":"aaa", "b":"bbb", "c":"ccc", "d":"ddd", "answer":"ddd" } 
];
var i=0;
function show(i){
 document.getElementById("ques").innerHTML=questions[i].q;
 // 更新对应label的内容
 document.getElementById("opt1-label").innerHTML=questions[i].a;
 document.getElementById("opt2-label").innerHTML=questions[i].b;
 document.getElementById("opt3-label").innerHTML=questions[i].c;
 document.getElementById("opt4-label").innerHTML=questions[i].d;
}
show(i);

方案2：直接在radio后添加文本节点 #

如果不想用label，也可以把文本放在radio所在的div里，作为相邻元素：

修改后的HTML代码 #

<!doctype html>
<html>
<head>
<title> Ques and Ans </title>
<link rel="stylesheet" type="text/css" href="qa.css">
</head>
<body>
<div id="container">
<header>
<div class="header_mid">
<h1>BitsBridge</h1>
</div>
</header><br>
<div id="main">
<div id="ques"></div><br>
<div>
<input type="radio" id="opt1" name="options">
<span id="opt1-text"></span>
</div><br>
<div>
<input type="radio" id="opt2" name="options">
<span id="opt2-text"></span>
</div><br>
<div>
<input type="radio" id="opt3" name="options">
<span id="opt3-text"></span>
</div><br>
<div>
<input type="radio" id="opt4" name="options">
<span id="opt4-text"></span>
</div><br>
</div>
</div>
<script type="text/javascript" src="qa.js"></script>
<button class="submit" id="sub">Next</button>
</body>
</html>

修改后的JS代码 #

var questions=[ 
  { "q":"1.what is what?", "a":"aaa", "b":"bbb", "c":"ccc", "d":"ddd", "answer":"aaa" }, 
  { "q":"2.what is what?", "a":"aaa", "b":"bbb", "c":"ccc", "d":"ddd", "answer":"bbb" }, 
  { "q":"3.what is what?", "a":"aaa", "b":"bbb", "c":"ccc", "d":"ddd", "answer":"ccc" }, 
  { "q":"4.what is what?", "a":"aaa", "b":"bbb", "c":"ccc", "d":"ddd", "answer":"ddd" } 
];
var i=0;
function show(i){
 document.getElementById("ques").innerHTML=questions[i].q;
 // 更新span的内容
 document.getElementById("opt1-text").innerHTML=questions[i].a;
 document.getElementById("opt2-text").innerHTML=questions[i].b;
 document.getElementById("opt3-text").innerHTML=questions[i].c;
 document.getElementById("opt4-text").innerHTML=questions[i].d;
}
show(i);

如果后续要实现“Next”按钮切换题目，记得给按钮添加点击事件来更新题目索引，比如：

document.getElementById("sub").addEventListener("click", function() {
  i++;
  // 防止超出数组范围，循环回到第一题
  if (i >= questions.length) {
    i = 0;
  }
  show(i);
});

内容的提问来源于stack exchange，提问作者mkp24