如何使用Javascript将文本添加到单选按钮？

我正在创建一个测验，我有单选按钮需要用来选择答案。如何使用Javascript将文本添加到单选按钮？

我正在使用包含具有3个属性的对象的数组。

属性提出问题。
一个属性拥有一组答案。
一个属性，它具有来自答案阵列的正确答案的索引值。

基本上它看起来是这样的：

var questions = [{question1: "What color is the sky?", answers:["blue", "red", "green", "orange"], correctAnswer: 0}];

correctAnswer: 0是蓝色的指标值。

我现在正要开始将这些对象的值放入标记中。

例如，我在我的html中有4个单选按钮。

<form id="buttons"> 
      <input type="radio" name="answer" value="0"><br> 
      <input type="radio" name="answer" value="1"><br> 
      <input type="radio" name="answer" value="2"><br> 
      <input type="radio" name="answer" value="3"><br> 
     </form>

我需要JavaScript来输入回答我的问题我旁边的单选按钮，我想测试，如果人通过检查单选按钮的值是一样的索引值选择了正确的答案在物体内部。

所以它看起来像上面的数组示例。

<form id="buttons"> 
      <input type="radio" name="answer" value="0">blue<br> 
      <input type="radio" name="answer" value="1">red<br> 
      <input type="radio" name="answer" value="2">green<br> 
      <input type="radio" name="answer" value="3">orange<br> 
     </form>

该示例中的正确答案是value =“0”;

我希望这不是太混乱。我正在从http://javascriptissexy.com/how-to-learn-javascript-properly/

来源

2014-02-08 Vodka_Tonic

如果你想学习免费的互联网教程的JavaScript，会更好，如果你看看[教程| MDN]（https://developer.mozilla.org/en-US/docs/Web/Tutorials） – Givi

如果您有兴趣，请参考[jsFiddle]（http：// jsfiddle.net/GKDev/P6VSR/3/） – Givi

谢谢你，我知道你不应该在这里留下这样的消息，但这真的让我感到很开心。 –

你的问题有一些模糊之处

如果有将是超过一个问题，那应该输入的名字是什么？例如name1，name2等？
你想用正确的答案做什么？举例来说，你可以将其存储为这样的输入数据属性：<input type="radio" name="answer" data-correct="true">Blue<br>

无论哪种方式，我认为既然你正在学习的Javascript，而不是jQuery的（这将使这个任务10次更容易）你可以试试这个：

（编辑使用Array.forEach（）而不是为（在var中...）

<form id="buttons"> 
</form> 

<script type="text/javascript"> 

var questions = [ 
    { question1: "What color is the sky?", 
    answers:["blue", "red", "green", "orange"], 
    correctAnswer: 0 
    } 
]; 

var questionHtml = ''; 
questions.forEach(function(question) { 
    questionHtml = '<p>'+ question.question1 + '</p>'; 
    question.answers.forEach(function(answer, i) { 
    questionHtml += '<input type="radio" name="answer" ' 
    questionHtml += 'value="' + i + '">' 
    questionHtml += answer + '<br>' 
    }) 
}) 
document.getElementById('buttons').innerHTML = questionHtml; 

</script>

你可以用它在这里玩：JSFiddle

来源

2014-02-08 20:55:22 Keith

在第4周测验项目上工作在您的输入之后添加标签并填写答案。

<form id="buttons"> 
    <input type="radio" name="answer" value="0"><label></label><br> 
    <input type="radio" name="answer" value="1"><label></label><br> 
    <input type="radio" name="answer" value="2"><label></label><br> 
    <input type="radio" name="answer" value="3"><label></label><br> 
</form>

和

var labels = document.getElementsByTagName('label'); 
for (var i = 0; i < labels.length; i += 1) { 
    labels[i].innerHTML = yourValues[i]; 
}

从那里，你要添加更智能逻辑把正确的价值在正确的标签，但是这是基本的想法。

来源

2014-02-08 20:39:31

如何使用Javascript将文本添加到单选按钮？

回答

相关问题