Question

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

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

sample_text

但是当使用单选按钮标签时，我不知道该怎么做。

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>

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

Answer 1

您只需提供单选按钮ID。

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

然后您就可以使用

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

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

Answer 2

您可以使用HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.MULTIPART_FORM_DATA); MultiValueMap<String, Object> body = new LinkedMultiValueMap<>(); body.add("file", "dupa".getBytes()); HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(body, headers); RestTemplate restTemplate = new RestTemplate(); ResponseEntity<String> response = restTemplate .postForEntity("http://api:8080/upload", requestEntity, String.class); return response.getBody();选择与nextElementSibling输入正好相邻的label个。但是请记住，此解决方案完全取决于您的HTML结构，如果您在radio和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;

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

2 个答案: