CODEWITHSUNDEEP
javascripthtml
Vodka_Tonic
Vodka_Tonic

Reputation: 152

How can I add text to radio button with Javascript?

I'm creating a quiz and I have radio buttons that need to be used to select answers.

I'm using an array which contains objects that have 3 properties.

  1. a property asks the question.

  2. a property holds an array of answers.

  3. a property that has the index value of the correct answer from the array of answers.

Basically it looks like this:

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

correctAnswer: 0 is the index value of blue.

I'm at the point where I need to start putting the values of these objects into the markup.

For example, I have 4 radio buttons in my html.

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

I need javascript to input the answers to my question next to my radio buttons and I want to test if the person selected the correct answer by checking if the value of the radio button is the same as the index value inside the object.

so it would look like this with the above array example.

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

the correct answer in the example would be the value = "0";

I hope this is not too confusing. I am working on the week 4 quiz project from http://javascriptissexy.com/how-to-learn-javascript-properly/

Upvotes: 1

Views: 4205

Answers (3)

Vinci
Vinci

Reputation: 1286

Simple code that adds new node with the label and it work's fine

var x = document.createElement("INPUT");
        x.setAttribute("type", "radio");
        x.setAttribute("name", "sort");
        x.setAttribute("value", "town");
        x.setAttribute("id", "town");
        container_element.appendChild(x);
        var label = document.createElement('label');
        label.setAttribute('for', 'town');
        label.innerHTML = "town";
        container_element.appendChild(label);

Upvotes: 1

Keith
Keith

Reputation: 994

Your question has a few ambiguities

  1. If there is going to be more than one question, then what should the input names be? For instance name1, name2, etc.?

  2. What do you want to do with the correct answer? For instance, you could store it as a data attribute on the input like this: <input type="radio" name="answer" data-correct="true">Blue<br>

Either way, I assume since you are studying Javascript, and not jQuery (which would make this task 10 times easier) you can try this:

(Edited to use Array.forEach() instead of for(var in...)

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

You can play with it here: JSFiddle

Upvotes: 0

Jeff F.
Jeff F.

Reputation: 1067

Add labels after your inputs and fill the answers in those.

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

and 

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

From there you'll want to add smarter logic for putting the right value in the right label, but that's the basic idea.

Upvotes: 0

Related Questions