クリックイベント後にオプションタグからユーザの選択を表示する方法はありますか？

Question

開始ボタンをクリックした後、オプションタグからユーザーの選択を表示しようとしています "各質問の間に3秒間の5つのフォローアップ質問を選択しました"のように表示されます。私はこれをどのようにするべきですか？私はdisplayInputVariablesのdivタグに文を入れるべきではないと思う。それはjQueryであり、まだ定義されていないからだ。 JavaScriptは上から下に読み込みます。

ありがとうございます。それは有り難いです。

<div id="container"> 

    <select id="numFollowUp" name="numFollowUp" style=display:none> 
      <option value="">Number of extra follow-up questions</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
     </select> 
    <br> 
    <br> 
    <select id="secFollowUp" name="secFollowUp" style=display:none> 
      <option value="">Second between each question</option> 
      <option value="10">10</option> 
      <option value="11">11</option> 
      <option value="12">12</option> 
      <option value="13">13</option> 
      <option value="14">14</option> 
      <option value="15">15</option> 
    </select> 
</div> 
<br> 
<button id="subBut" style=display:none onClick="">Start!!</button> 

<div id="audioControl"> 
    <button id="play" style=display:none>Play!!</button> 
    <button id="pause" style=display:none onClick="">Pause!!</button> 
    <button id="restart" style=display:none onClick="">Restart!!</button> 
    <br> 
    <br> 
    <div id="counDownTimer" style=display:none></div> 
    <div id="displayInputVariables" style=display:none></div> 
</div> 
<script> 
    $("#ImageEnterVariables").on("click", function() { 
     $('#ImageEnterVariables').hide(); 
     $("#numFollowUp").show(); 
     $("#secFollowUp").show(); 
     $("#subBut").show(); 
     $("#pause").hide(); 

    }); 


    $(document).ready(function() { 

     //start button 
     $("#subBut").on("click", function() { 
      $("#numFollowUp").hide(); 
      $("#secFollowUp").hide(); 
      $("#subBut").hide(); 
      $("#play").show(); 
      $("#pause").show(); 
      $("#restart").show(); 
      $("#counDownTimer").show(); 
      $("#displayInputVariables").show(); 
     }); 
</script> 

Answer 1

これを試してください。

$(document).ready(function() { 

     //start button 
     $("#subBut").on("click", function() { 
      $("#numFollowUp").hide(); 
      $("#secFollowUp").hide(); 
      $("#subBut").hide(); 
      $("#play").show(); 
      $("#pause").show(); 
      $("#restart").show(); 
      $("#counDownTimer").show(); 
      $("#displayInputVariables").show(); 

document.write("You have selected" + $("#numFollowUp option:selected").text() + " " + $("#numFollowUpoption[value='']").text() + " with " + $("#secFollowUp option:selected").text() + " " +$("#secFollowUp option[value='']").text()); 
     }); 
}); 

//出力は次のようになります（選択された値に基づいて）

//document.write「あなたはそれぞれの質問の間に3秒と5ナンバーフォローアップの質問を選択している」（）いくつかのテキストを書きます直接HTML文書に変換します。あなたの要件ごとに

//、私はちょうどそれを考え出したいくつかのdivや段落

Answer 2

で出力を得ることができます。私は$（ "＃displayInputVariables"）の後にIdを取得することでinnerHTMLを行いました。ありがとうございました。