CODEWITHSUNDEEP
javascripthtml
Liam
Liam

Reputation: 568

How can I put text in a radio button label?

I am using an array with questions and radio buttons to select the value of the user's choice.

I know how to change the text inside a button dynamically.

document.getElementById('rad1').innerHTML = arrayQuestion[i].ansA;

But I do not know how to do this when using a label for a radio button .

<html>
<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <title></title>
    </head>

    <body>
        <form id="formEl">
            <h2 id="question"></h2>

            <input type="radio" id="rad1" name="rad" value="choice 1">
            <label for="rad1"></label>

            <input type="radio" id="rad2" name="rad" value="choice 2">
            <label for="rad2"></label>

            <input type="radio" id="rad3" name="rad" value="choice 3">
            <label id="labelRad3"></label>

            <input type="radio" id="rad4" name="rad" value="choice 4">
            <label for="rad4"></label>

            <button id="previous" type="button" class="userSelection">Previous</button>
            <button id="next" type="button" class="userSelection">Next</button>
            <button id="submit">Submit</button>

        </form>
    </body>
    <script src = js/app.js></script>
</html>

class Question {
    constructor(question, ansA, ansB, ansC, ansD, answer) {
        this.question = question;
        this.ansA = ansA;
        this.ansB = ansB;
        this.ansC = ansC;
        this.ansD = ansD;
        this.answer = answer;
    };

    checkAns(ansSelected, answer) {
        if (ansSelected === answer) {
            console.log('Well Done')
        };
    };
};

//Questions
var questionOne = new Question('Where is Creete?',
                               'Barcalona', 'Greece', 'Dubi', 'Ireland', 'Greece');
var questionTwo = new Question('How many times have Liverppool won the Champions Legue?',
                               '1', '4', '6', '5', '6');
var questionThree = new Question('Where was the first Godfather in the mafia from?',
                                 'Milan', 'Gunoa', 'Rome', 'Napoli', 'Napoli');

//Index of the array with the questions array 
var i = 0;
const arrayQuestion = [questionOne, questionTwo, questionThree];


//Displaying the first index of the question array on load up
document.getElementById('question').innerHTML = arrayQuestion[i].question;
document.getElementById('rad1').innerHTML = arrayQuestion[i].ansA;
document.getElementById('rad2').innerHTML = arrayQuestion[i].ansB;
document.getElementById('labelRad3').innerHTML = arrayQuestion[i].ansC;
document.getElementById('rad4').innerHTML = arrayQuestion[i].ansD;

The result should populate the answers dynamically in their corresponding label

Upvotes: 0

Views: 375

Answers (2)

masoudmanson
masoudmanson

Reputation: 748

You can use nextElementSibling to select labels that are exactly next to radio inputs. But keep this in mind that this solution completely depends on your HTML structure, if you put anything between radio input and label this won't work anymore.

class Question {
  constructor(question, ansA, ansB, ansC, ansD, answer) {
    this.question = question;
    this.ansA = ansA;
    this.ansB = ansB;
    this.ansC = ansC;
    this.ansD = ansD;
    this.answer = answer;
  };

  checkAns(ansSelected, answer) {
    if (ansSelected === answer) {
      console.log('Well Done')
    };
  };
};

//Questions
var questionOne = new Question('Where is Creete?', 'Barcalona', 'Greece', 'Dubi', 'Ireland', 'Greece');
var questionTwo = new Question('How many times have Liverppool won the Champions Legue?', '1', '4', '6', '5', '6');
var questionThree = new Question('Where was the first Godfather in the mafia from?', 'Milan', 'Gunoa', 'Rome', 'Napoli', 'Napoli');

//Index of the array with the questions array 
var i = 0;
const arrayQuestion = [questionOne, questionTwo, questionThree];


//Displaying the first index of the question array on load up
document.getElementById('question').innerHTML = arrayQuestion[i].question;
document.getElementById('rad1').nextElementSibling.innerHTML = arrayQuestion[i].ansA;
document.getElementById('rad2').nextElementSibling.innerHTML = arrayQuestion[i].ansB;
document.getElementById('rad3').nextElementSibling.innerHTML = arrayQuestion[i].ansC;
document.getElementById('rad4').nextElementSibling.innerHTML = arrayQuestion[i].ansD;
<html>
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title></title>
</head>

<body>
  <form id="formEl">
    <h2 id="question"></h2>

    <input type="radio" id="rad1" name="rad" value="choice 1">
    <label for="rad1"></label>
    <br/>
    <input type="radio" id="rad2" name="rad" value="choice 2">
    <label for="rad2"></label>
    <br/>
    <input type="radio" id="rad3" name="rad" value="choice 3">
    <label for="rad3"></label>
    <br/>
    <input type="radio" id="rad4" name="rad" value="choice 4">
    <label for="rad4"></label>
    <br/>
    <br/>
    <button id="previous" type="button" class="userSelection">Previous</button>
    <button id="next" type="button" class="userSelection">Next</button>
    <button id="submit">Submit</button>

  </form>
</body>
<script src=j s/app.js></script>

</html>

Upvotes: 2

Barmar
Barmar

Reputation: 782624

You can simply give the radio buttons IDs.

<label id="rad1-label" for="rad1"></label>

Then you can use

document.getElementById("rad1-label").innerText = arrayQuestion[i].ansA;

Use innerText rather than innerHTML unless you need HTML tags in the answer to be rendered.

Upvotes: 3

Related Questions