如何在单选按钮标签中添加文字？

Question

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 结果应在相应的标签中动态填充答案

Answer 1

You can simply give the radio buttons IDs. 您只需提供单选按钮ID。

<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. 除非您需要在答案中呈现HTML标记，否则请使用innerText而不是innerHTML 。

Answer 2

You can use nextElementSibling to select label s that are exactly next to radio inputs. 您可以使用nextElementSibling选择与radio输入正好相邻的label 。 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. 但是请记住，此解决方案完全取决于您的HTML结构，如果您在radio input和label之间放置任何内容，将无法再使用。

 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=js/app.js></script> </html>

如何在单选按钮标签中添加文字？

问题描述

2 个解决方案

解决方案1
3 已采纳 2019-08-29 19:30:38

解决方案2
1 2019-08-29 20:14:20

如何在单选按钮标签中添加文字？

问题描述

2 个解决方案

解决方案1 3 已采纳 2019-08-29 19:30:38

解决方案2 1 2019-08-29 20:14:20

解决方案1
3 已采纳 2019-08-29 19:30:38

解决方案2
1 2019-08-29 20:14:20