Javascript 单选按钮值不显示_Javascript_Html_Css

Javascript 单选按钮值不显示

javascript html css

Javascript 单选按钮值不显示,javascript,html,css,Javascript,Html,Css,这是我正在编写的js代码，我需要获取问题和答案，这是用于测试的代码。 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"

这是我正在编写的js代码，我需要获取问题和答案，这是用于测试的代码。 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;
  document.getElementById("opt1").innerHTML=questions[i].a;
  document.getElementById("opt2").innerHTML=questions[i].b;
  document.getElementById("opt3").innerHTML=questions[i].c;
  document.getElementById("opt4").innerHTML=questions[i].d;
}
show(i);

我写了这个js代码来打印上面数组中的问题值和单选按钮形式的答案，但是单选按钮中并没有显示答案

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">
            </div><br>
            <div>
                <input type="radio" id="opt2" name="options">
            </div><br>  
            <div>
                <input type="radio" id="opt3" name="options">
            </div><br>
            <div>
            <input type="radio" id="opt4" name="options">
            </div><br>
        </div>
</div>
<script type="text/javascript"  src="qa.js">
    </script>
    <button class="submit" id="sub">Next</button>

</body>
</html>


问答
比特桥












下一个

当我能够获取问题而不是答案时，我是否有任何错误。

您实际上缺少单选按钮的

（您也可以使用

）。只需添加一些带有ID的

元素，然后将文本设置到其中

var问题=[
{
“q”：“1.什么是什么？”，
“a”：“aaa”，
“b”：“bbb”，
“c”：“ccc”，
“d”：“ddd”，
回答：“aaa”
},
{
“q”：“2.什么是什么？”，
“a”：“aaa”，
“b”：“bbb”，
“c”：“ccc”，
“d”：“ddd”，
回答：“bbb”
},
{
“q”：“3.什么是什么？”，
“a”：“aaa”，
“b”：“bbb”，
“c”：“ccc”，
“d”：“ddd”，
“答复”：“ccc”
},
{
“q”：“4.什么是什么？”，
“a”：“aaa”，
“b”：“bbb”，
“c”：“ccc”，
“d”：“ddd”，
回答：“ddd”
}
];
var i=0；
功能表演（一）{
document.getElementById（“ques”）.innerHTML=questions[i].q；
document.getElementById（“opt1”）.innerHTML=questions[i].a；
document.getElementById（“lbl1”）.innerHTML=问题[i].a；
document.getElementById（“opt2”）.innerHTML=问题[i].b；
document.getElementById（“lbl2”）.innerHTML=问题[i].b；
document.getElementById（“opt3”）.innerHTML=questions[i].c；
document.getElementById（“lbl3”）.innerHTML=questions[i].c；
document.getElementById（“opt4”）.innerHTML=questions[i].d；
document.getElementById（“lbl4”）.innerHTML=questions[i].d；
}
表演（一）

问答
比特桥












下一个

这解决了问题，问题在于id映射。
我看到两个问题：
正如我已经说过的，修复输入的html标记
您试图在输入
元素上使用.innerHTML
，这是无效的
为了实现您的目标，我将稍微更改框模型，在输入
旁边添加一个标签
元素，然后将答案插入该标签而不是输入元素
请参阅我的示例：
您的HTML代码看起来无效，请尝试关闭标记，例如
@GiulioAmbrogi，但仍然存在相同的问题。因此，不需要在输入上设置innerHTML，对吗？仍然需要@GolfWolf。滚动代码段。你会看到的。我写了几行，它仍然可以正常工作。恕我直言，先生，我还是一个初学者，上面链接中的代码对我来说有点复杂。Thanks@mkp24codepen片段正是您的代码（从这里复制并粘贴），我只应用了上面提到的更改，代码显示有一个表代码@giulioambrogi
     <div id="main">
            <div id="ques"> 
            </div><br>
            <div>
                <input type="radio" id="a" name="options"/>
                <span id="o1"></span>
            </div><br>
            <div>
                <input type="radio" id="b" name="options"/>
                <span id="o2"></span>
            </div><br>  
            <div>
                <input type="radio" id="c" name="options"/>
                <span id="o3"></span>
            </div><br>
            <div>
                <input type="radio" id="d" name="options"/>
                <span id="o4"></span>
            </div><br>
    </div>

document.getElementById("ques").innerHTML=questions[i].q;
document.getElementById("o1").innerHTML=questions[i].a;
document.getElementById("o2").innerHTML=questions[i].b;
document.getElementById("o3").innerHTML=questions[i].c;
document.getElementById("o4").innerHTML=questions[i].d;