진행률 표시 줄이 HTML 페이지에서 작동하지 않습니다.

Question

저는 설문지 양식을 만들기 위해 javascript와 HTML을 사용하고 있습니다. 내 아이디어는 얼마나 많은 질문을 가졌는지 사용자에게 알려주는 것이 었습니다. 진행률 막대를 얻는 몇 가지 방법을 시도해 보았습니다. 아래 코드로 넘어갔습니다. 사용자가 질문에 대한 답변을 선택한 후에는 막대가 진행되기를 원합니다.

이것은 자바 스크립트 코드입니다.

<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/