進行状況バーがHTMLページで機能しない

Question

私はアンケートフォームを作成するためにjavascriptとHTMLを使用しています。私のアイデアは、どれくらい多くの質問があるかをユーザーに知らせることでした。私は下のコードに私を導いている作業の進捗バーを取得するいくつかの方法を試してみました。私は、ユーザーが質問に対する回答を選択した後、バーを進めたいと思っています。

これはjavascriptコードです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script> 
var progress = 0; 
//need this to check if the question has not been answered before 
var questions = { 
    "q1": 0, 
    "q2":0, 
    "q3":0, 
    "q4":0 
} 
$(function() { 
    $("#progressbar-1").text(progress) 
    $("input, select").change(function() { 
     el_name = $(this).attr("name"); 
     switch (this.nodeName.toLowerCase()) { 
      case "select": 
      field =$("[name='"+el_name+"']"); 
      val = (field.val() === "" || !field.val()) ? null: field.val(); 
      break; 
      case "input": 
      field =$("[name='"+el_name+"']:checked"); 
      val = field.length; 
      break; 
     } 
     if (val) { 
      if (!questions[el_name]) { 
       progress = progress +1; 
       questions[el_name]=1 
      } 
     } else { 
      questions[el_name]=0 
      progress = (progress > 0)?progress-1:0; 
     } 
     $("#progressbar-1").text(progress) 
    }) 
}) 
</script> 

これはHTMLコードです。

<div class="container-main bg-5"> 
    <button style="float:left" onclick="goBack()">Go Back</button> 

    <h1>What IT sector could suit you</h1> 
    <p>Take the questionnaire below!</p> 

    <form id="quiz"> 
     <!-- Question 1 --> 
     <h2>Do you enjoy fixing things</h2> 
     <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. --> 
     <!-- The value is which answer the choice corresponds to. --> 
     <label> 
      <input type="radio" name="q1" id="q1" value="c1"> 
      Yes 
     </label><br /> 
     <label> 
      <input type="radio" name="q1" id="q1" value="c2"> 
      No 
     </label><br /> 
     <label> 
      <input type="radio" name="q1" id="q1" value="c3"> 
      Maybe 
     </label><br /> 


     <!-- Question 2 --> 
     <h2>Do you enjoy problem solving?</h2> 
     <!-- Here are the choices for the second question. Notice how each input tag has the same name (q2), but a different name than the previous question. --> 
     <label> 
      <input type="radio" name="q2" value="c2"> 
      Yes 
     </label><br /> 
     <label> 
      <input type="radio" name="q2" value="c1"> 
      No 
     </label><br /> 
     <label> 
      <input type="radio" name="q2" value="c3"> 
      Unsure 
     </label><br /> 

     <!-- Question 3 --> 
     <h2>Do you enjoy maths?</h2> 
     <!-- Choices for the third question --> 
     <label> 
      <input type="radio" name="q3" value="c2"> 
      Yes 
     </label><br /> 
     <label> 
      <input type="radio" name="q3" value="c1"> 
      No 
     </label><br /> 
     <label> 
      <input type="radio" name="q3" value="c3"> 
      Unsure 
     </label><br /> 


     <!-- Question 4 --> 
     <h2>Do you often take thing apart to rebuild them?</h2> 
     <!-- Choices for the fourth question --> 
     <label> 
      <input type="radio" name="q4" value="c1"> 
      Yes 
     </label><br /> 
     <label> 
      <input type="radio" name="q4" value="c2"> 
      No 
     </label><br /> 
     <label> 
      <input type="radio" name="q4" value="c3"> 
      I have never done it before so i don't know 
     </label><br /> 

     <!--Question 5 --> 
     <h2>Hardware or Software?</h2> 
     <label> 
      <input type="radio" name="q5" value="c1"> 
      Hardware 
     </label><br /> 
     <label> 
      <input type="radio" name="q5" value="c2"> 
      Software 
     </label><br /> 

     <button type='button' id="submit" onclick="tabulateAnswers()">Submit Your Answers</button> 
     <button type="reset" id="reset" onclick="resetAnswer()">Reset</button> 
    </form> 

    <div id ="progressbar-1"></div> 

</div> 

数字は増加していますが、CSSは発生していません。私は何かが明らかに明白ではないように感じる。

Answer 1

進捗バーのHTML、JavaScriptコードを更新し、CSSを追加しました。

プログレスバーHTML：

<div class="progress_dashv2"> 
    <div id="progressbar-1"> </div>                
</div> 

のjQueryコード：

var total_questions = 4; 

// progress bar Calculation 
var result = progress/total_questions; 
result = result * 100; 

$("#progressbar-1").css({'width':result+'%','background-color':'red'}); 
$("#progressbar-1").text(progress); 

CSSクラス：

.progress_dashv2 { 
    margin-top: 0px; 
    background: #464646; 
    width: 100%; 
    float: left; 
    border-radius: 3px; 
    height: 30px; 
} 

#progressbar-1{ 
    line-height: 11px; 
    padding: 10px; 
    border-radius: 3px; 
} 

Pリースは、次のリンク（あなたの例）を参照してください。

https://jsfiddle.net/fd8sntu8/1/