如何将文本放入单选按钮标签中?

利亚姆

我正在使用带有问题和单选按钮的数组来选择用户选择的值。

我知道如何动态更改按钮内的文本。

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

但是我不知道在为单选按钮使用标签时如何执行此操作。

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

结果应在相应的标签中动态填充答案

巴马

您可以简单地提供单选按钮 ID。

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

然后你可以使用

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

使用innerText而不是innerHTML除非您需要在要呈现的答案中使用HTML 标记。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将单选按钮放入嵌套条件中

如何将标签文本与单选按钮对齐

如何将单选按钮标签放在单行中

如何将标签与单选按钮关联?

如何将动态加载的单选按钮放入一个组中?

如何将文本放入框中?

Vue:如何将单选按钮放置在标签的中心

如何将单选按钮包装在轨道标签内

如何将html标签放入标签columnheader中?

Android:如何将单选按钮的文本设置为Integer?

如何将单选按钮与左侧的文本对齐?

如何将文本或数字放在Android中的单选按钮内?

如何将所有单选按钮值放入 Json 并使用本地存储加载?

如何将变量放入javascript中的innerHTML标签内?

如何将标签放入已创建的内部框架中?

如何将单选按钮的值存储在数组中

如何将单选按钮的值发布到MySQL中

如何将选定的单选按钮存储在数组中?

如何将单选按钮值保存到 SQLtable 中

单击按钮时如何将文本设置为标签?

如何将文本放入右侧的 ListItem 中?

如何将文本放入SVG形状中

如何将文档中的文本放入数据库?

如何将</ textarea>文本放入textarea代码框中

如何将文本放入带有颤动的 swiper 中?

如何将文本文件中的“拆分文本”输入字符串到文本框中并更改单选按钮的文本?

选择单选按钮更改标签文本,选择新的单选按钮时,先前选中的单选按钮标签文本将恢复

如何将SwiftUI按钮放入NSToolbar?

如何将图标放入按钮(MahApps)