如何从我的 HTML 表单中获取字符串到 DOM 上？

Question

我正在尝试将表单中的选定响应与正确答案进行比较，以便显示“正确”。 或“不正确”页面，我使用 jQuery 来确定任何给定问题的选定答案是什么。 但我无法弄清楚如何定位响应选项的实际内容，而不仅仅是它的值或 HTML 中的其他一些组件，因为每个问题集的这些都不同。

这是来自脚本 store.js 的问题和响应的 html 模板

function renderQuestion() {
    console.log("hello");
    let questions = STORE.questions[questionNumber];
    const questionTemplate = $( `
    <div class="container" align="center">
        ${questions.image}
          <p>${questions.questionText}<br></p>
          <form method="post" onsubmit="return nextQuestion()">
              <input type="radio" name="choice">${questions.responses[0]}<br>
              <input type="radio" name="choice">${questions.responses[1]}<br>
              <input type="radio" name="choice">${questions.responses[2]}<br>
              <input type="radio" name="choice">${questions.responses[3]}<br>
              <button type="submit" id="choose" value="submit">Submit</button>
            </form>
      </div>`);
      $("main").html(questionTemplate);
}

这是我正在处理的 function - 控制台应该记录响应选项的文本，但是当我使用.val() 时，它显示“on”，或者未定义或其他一些随机性，具体取决于我尝试的方法：

function checkAnswer() {
$("main").on("click","#choose",function(event){
    let questions = STORE.questions[questionNumber];
    event.preventDefault();
    console.log("clicked");
    let chosenAnswer=$("input[name=choice]:checked").val();
    console.log(chosenAnswer);

这是 function 的 rest，显示正确。 或不正确，屏幕。 它现在总是显示不正确的屏幕，因为我无法正确设置 selectedAnswer 变量。

    if (!chosenAnswer) {
        alert ("Select One");
        return;
    }
    if(chosenAnswer===questions.answer) {
    const correctResponse = $(`
    <div class="container" align="center">
    ${questions.image}
    <h4>${questions.answer}</h4>
    <p>Correct!<p>
    <button type="submit" id="next" value="submit">Next</button>
    </div>`);
    $("main").html(correctResponse);}
    else{
    const inCorrectResponse = $(`
    <div class="container" align="center">
    ${questions.image}
    <p> Incorrect. <br> The correct answer is:</p>
    <h4>${questions.answer}</h4>
    <button type="submit" id="next" value="submit">Next</button>
    </div>`);
    $("main").html(inCorrectResponse);
    nextQuestion();}
})
}

这些是 store.js 中的一些示例问题。 我正在使用“答案”来将选定的响应与正确的响应进行比较。

const STORE = {
    questions: [ {
        image: `<div class="image"> <img src="nettles.svg", alt="mystery plant illustration"> </div>`,
            questionText: "Which plant provides the most minerals and nutrients.",
            responses: [
                "Licorice <i>Glycyrrhiza glabra</i>",
                "Jiagulon <i>Gynostemma pentaphyllum</i>",
                "Lemon Balm <i>Melissa Officianlis</i>",
                "Nettles <i>Urtica dioica</i>"
            ],
            answer: "Nettles <i>Urtica dioica</i>"
        },
        {
            questionText: "Which Plant is known for lowering  high cholesterol, high blood pressure, and improving heart function as well as improving memory, and preventing hair loss?",
            responses: [
                "Jiagulon <i>Gynostemma pentaphyllum</i>",
                "Licorice <i>Glycyrrhiza glabra</i>",
                "Nettles <i>Urtica dioica</i>",
                "Lemon Balm <i>Melissa Officianlis</i>"
            ],
            answer: "Jiagulon <i>Gynostemma pentaphyllum</i>"
        },
     ]
}

我已经尝试了一堆我能够研究的不同建议，但我认为我对表单提交和 jQuery 不够熟悉。

Answer 1

<input type="radio" name="choice">${questions.responses[0]}

请查看您的输入元素，它会返回“on”，因为您没有为其分配值。

它应该是

<input type="radio" name="choice" value="${questions.responses[0]}">${questions.responses[0]}