Как я могу получить строку из моей HTML-формы на DOM? - PullRequest
Новая
       18

Как я могу получить строку из моей HTML-формы на DOM?

0 голосов
/ 11 октября 2019

Я пытаюсь сравнить выбранный ответ из формы с правильным ответом, чтобы я мог показать «Правильно!»или "Неверно!"страница следующая. Я использую jQuery, чтобы установить, каким был выбранный ответ для любого заданного вопроса, но у меня возникают проблемы с выяснением того, как настроить таргетинг на фактическое содержимое параметра ответа, а не только на его значение или какой-либо другой компонент из HTML, потому что онибудет отличаться для каждого набора вопросов.

Вот HTML-шаблон для вопросов и ответов из скрипта store.js 


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

Вот функция, над которой я работаю - консоль должна регистрировать текст ответаопция, но она показывает «вкл.», когда я использую .val (), или неопределенную, или какую-то другую случайность, в зависимости от того, какой метод я пробую: 

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

, вот и остальная часть этой функции, отображающая правильный! или неверно! экраны. Сейчас он всегда показывает неправильный экран, потому что я не могу правильно настроить переменную 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.

1 Ответ

0 голосов
/ 11 октября 2019 
<input type="radio" name="choice">${questions.responses[0]}

пожалуйста, взгляните на ваш элемент ввода, он вернется "вкл", так как вы не присваиваете ему значение.

это должно быть 

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