Question

我被困住了。我正在创建一个预算应用程序，共有4个问题。单击第一个按钮（Take the WIZQuiz）时，按钮消失，第一个问题出现。那部分我得到了。我无法弄清楚该怎么做才能让第一个问题的提交按钮起作用。我需要提交答案（数字值），将答案粘贴在var中//保存以供以后计算，然后隐藏问题div并显示下一个问题。

这是我的代码。任何帮助或见解表示赞赏。

<!-- jquery -->

    $("button").click(function() {
      $("#question1").show();
      $("button").hide();
    });



<!-- css -->

    .quizQuestions {
       display: none;
    }

    #quizPrintOut {
      display: none;
    }

<!-- markup -->
<body>
    <div id="content">
       <h1>Abracadabra!</h1>
       <h2>Making a budget is hard. Let me make one for you!</h2>
     </div>

     <button type="button">Take the Wiz Quiz!</button>
     <!-- Make this button disappear and Question 1 appear when clicked -->

      <div id="quizContainer">
        <div id="question1" class="quizQuestions" >
         <p><strong>What is your monthy income?</strong></p>
           <input type="text">
           <input type="submit" value="Next"></div>
    <!-- When input is submitted: hide div, show #question2, store input value into var income -->

    <div id="question2" class="quizQuestions">
       <p><strong>How many people reside in your household?</strong></p>
         <input type="text">
         <input type="submit" value="Next"></div>
    <!-- When input is submitted: hide div, show #question3, store input value-->

      <div id="question3" class="quizQuestions">
         <p><strong>Do you have a lot of debt?</strong></p>
           <input type="radio" name="debt" value="YES"> YES<br>
           <input type="radio" name="debt" value="NO"> NO
           <input type="submit" value="Next"></div>
    <!-- When input is submitted: hide div, show #question4, store input value-->

      <div id="question4" class="quizQuestions">
         <p><strong>Are you frugal or fancy?</strong></p>
           <input type="radio" name="spending" value="Frugal"> Frugal<br>
           <input type="radio" name="spending" value="Fancy"> Fancy
           <input type="submit" value="Work your Magic, BudgetWiz!"></div>
    </div>

<!-- When input is submitted: hide div, store input value, calculate and print out results-->


        <form id="quizPrintOut">
        <h3>Presto Chango! <br> You are now a Budgeting Wizard!</h3>
          <ul>
            <li><label for="housing" id="housing"></label>Housing:</li><output></output>
            <li><label for="transportation" id="car"></label>Transportation:</li><output></output>
            <li><label for="food" id="food"></label>Food:</li><output></output>
            <li><label for="healthcare" id="health">Healthcare:</label></li><output></output>
            <li><label for="utilities" id="utilities"></label>Utilities:</li><output></output>
            <li><label for="savings" id="save"></label>Savings:</li><output></output>
            <li><label for="fun" id="fun"></label>Fun:</li><output></output>
            <li><label for="debts" id="debt">Debts:</label></li><output></output>
            <li><label for="other" id="other">Other:</label></li><output></output>
          </ul>

          </form>
      </div>
    </body>

建立预算应用程序;多个提交按钮和jquery问题。

0 个答案: