gpt4 book ai didi

javascript - 单选按钮值未显示

转载 作者:太空宇宙 更新时间:2023-11-04 15:53:06 25 4
gpt4 key购买 nike

这是我正在处理的 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>

我做错了什么,因为我能够获取问题但不能获取答案。

最佳答案

你实际上错过了 <label>对于单选按钮(您也可以使用 <span>)。只需添加一些 <label>带有 id 的元素,然后将文本设置到其中。

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("lbl1").innerHTML = questions[i].a;
document.getElementById("opt2").innerHTML=questions[i].b;
document.getElementById("lbl2").innerHTML = questions[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;
}
show(i);
<!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='opt1' id='lbl1'></label>
</div><br>
<div>
<input type="radio" id="opt2" name="options">
<label for='opt2' id='lbl2'></label>
</div><br>
<div>
<input type="radio" id="opt3" name="options">
<label for='opt3' id='lbl3'></label>
</div><br>
<div>
<input type="radio" id="opt4" name="options">
<label for='opt4' id='lbl4'></label>
</div><br>
</div>
</div>
<script type="text/javascript" src="qa.js">
</script>
<button class="submit" id="sub">Next</button>

</body>
</html>

注意:使用for属性,以便在您单击文本时选择单选按钮。

关于javascript - 单选按钮值未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48353969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com