Question

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

我有什么不对的，因为我能够获取问题而不是答案。

Answer 1

您确实错过了单选按钮的<label>（您也可以使用<span>）。只需在id中添加一些<label>元素，然后将文本设置为它。

＆＃13;

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);

＆＃13;

<!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>

＆＃13;

注意：使用for属性，以便在单击文本时选中单选按钮。

Answer 2

     <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>

只需在html代码中使用span标记添加另一个id进行映射。并在js代码中：

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;

这解决了问题，问题在于id映射。

Answer 3

我看到两个问题：

正如我已经评论过，修复输入的html标记
您试图在.innerHTML元素上使用input，这是无效的

为了达到目标，我会略微更改框模型，在label旁边添加input元素，然后将答案插入该标签而不是输入元素。

请参阅我的示例：https://codepen.io/giulioambrogi/pen/QaYyzw

单选按钮值未显示

3 个答案: