如何使用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將文本添加到單選按鈕？

回答

相關問題