Question

我正在根据所选回复提交表单并显示内容。现在，我只是想让按钮起作用，这样它就可以从一个问题转到显示正确答案的显示屏，然后转到下一个问题。 index.js

function startQuiz() {
    $('#startButton').click(function(event){
        console.log("Keep Going");
        renderQuestion();
    }
    );
}
let questionNumber= 0

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 input type="submit" id="choose" value="submit">Submit</button>
            </form>
      </div>`);
      $("main").html(questionTemplate);
}

function checkAnswer() {
$("main").on("click","#choose",function(event){
    let questions = STORE.questions[questionNumber];
    event.preventDefault();
    console.log("clicked");
    const correctResponse = $(`
    <div class="container" align="center">
    ${questions.image}
    <h4>${questions.answer}</h4>
    <p>Correct!<p>
    <button input type="submit id="next" value="submit">Next</button>
    </div>`);
    $("main").html(correctResponse);
})
}

function nextQuestion(){
$("main").on("click","#next",function(event){
    event.preventDefault();
    console.log("Don't turn back");
    questionNumber= questionNumber +1;
    renderQuestion();
})}

$(checkAnswer)
$(startQuiz)

我创建了一个console.log()，因此可以看到何时按下按钮，但按钮没有出现。另一方面，它没有刷新页面，只是看起来好像什么都没做。

index.html


<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Herbal Medicine: Adaptogens</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="questions" href="store.html">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="index.js"></script>
  <script src="store.js"></script>
</head>

<body>
  <h1>Herbal Medicine: Adaptogens</h1>
  <main>
    <div class="container" class="firstLetter">
      <p>Adaptogens are a category of healing herbs that have a number of beneficial qualities for the human body. They
        are characterized by their ability to perform well with other medications and supplements, they can build up in
        the system without negative effects, and they help the body adapt to stress on many levels. <br> 
        Stress can be emotional, physical and mental and the various adaptogens tend to apply their healing qualities to those areas
        of the body that most need support.<br>
        Herbal medicine has been cataloged throughout the ages, with physical records uncovered as early as 1500 BCE.
        Most prescription medications have been derived from plants, and their latin or botanical names will indicate
        such.<br>
        Test your knowledge and learn a thing or two about healing herbs!<br>
      </p>
      <button id="startButton">Start</button>
      <br> <h12>The statements in this quiz are not intended to diagnose or treat any conditions. When in doubt ask a pro!</h12>
    </div>
      </main>

</body>

</html>

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>"
        }
]
}

Answer 1

在index.js中尝试一下，

function checkAnswer() {
$("main").on("click","#choose",function(event){
    let questions = STORE.questions[questionNumber];
    event.preventDefault();
    console.log("clicked");
    const correctResponse = $(`
    <div class="container" align="center">
        ${questions.image}
    <h4>${questions.answer}</h4>
    <p>Correct!<p>
    <button input type="submit" id="next" value="submit">Next</button>
    </div>`);
    $("main").html(correctResponse);
    // for registering #next id event
    nextQuestion();
})

}

//说明：

功能nextQuestion（）会重新注册您的#next click事件，在DOM中，$ next id将出现在$（“ main”）。html（correctResponse）之后；线。因此，当#next id成功放置在DOM中时，应该调用nextQuestion（）。

Answer 2

您有几个较小的问题，包括错字：

按钮不能具有“输入”属性
在checkAnswer（）中，提交后您有一个未关闭的“：type =“ submit id =” next“

主要问题是您在#choose按钮上单击了eventListener，在窗体上单击了onsubmit函数。修复上述问题，删除onsubmit并将nextQuestion（）添加到checkAnswer（）的底部，它应该可以正常工作。您的其余代码都可以。

为什么我的HTML按钮没有注册点击？

2 个答案: