Значения только возвращают нули в вычислении

Question

Редактировать: по какой-то причине теперь он работает, браузер не обновляется с помощью файла .js, поэтому мне пришлось использовать сервер atom-live для его работы.

Я пытаюсь сделать несколько тестов интеллекта длясайт. Тест будет иметь 8 типов интеллекта и 5 утверждений на каждом из них. Я пытаюсь получить значение каждой отмеченной кнопки, чтобы добавить ее к определенному типу, но она просто показывает нули.

Вот фрагмент HTML-кода (другие типы удалены, так как он не может соответствовать):

 <div class="question">
  <div>1. I notice and enjoy different sounds. </div>
  <div> <input class="radiobutton" type="radio" name="m1" value="0" personalityType="musical"> Never &nbsp; <input class="radiobutton" type="radio" name="m1" value="1" personalityType="musical"> Rarely &nbsp; <input class="radiobutton"
      type="radio" name="m1" value="2" personalityType="musical">
    Often
    &nbsp;
    <input class="radiobutton" type="radio" name="m1" value="3" personalityType="musical"> Always
  </div>
  <p></p>
</div>
<div class="question">
  <div>6. I learn new skills by doing them rather than reading about how to do them. </div>
  <div> <input class="radiobutton" type="radio" name="m6" value="0" personalityType="bodily"> Never &nbsp; <input class="radiobutton" type="radio" name="m6" value="1" personalityType="bodily"> Rarely &nbsp; <input class="radiobutton" type="radio"
      name="m6" value="2" personalityType="bodily">
    Often
    &nbsp; <input class="radiobutton" type="radio" name="m6" value="3" personalityType="bodily"> Always
  </div>
  <p></p>
</div>
  <div>16. I enjoy nature walks in scenic places. </div>
  <div> <input class="radiobutton" type="radio" name="m16" value="0" personalityType="naturalist"> Never &nbsp; <input class="radiobutton" type="radio" name="m16" value="1" personalityType="naturalist"> Rarely &nbsp; <input class="radiobutton"
      type="radio" name="m16" value="2" personalityType="naturalist">
    Often &nbsp;
    <input class="radiobutton" type="radio" name="m16" value="3" personalityType="naturalist"> Always
  </div>
  <p></p>
</div>
  <div>21. I like being with many friends. </div>
  <div> <input class="radiobutton" type="radio" name="m21" value="0" personalityType="interpersonal"> Never &nbsp; <input class="radiobutton" type="radio" name="m21" value="1" personalityType="interpersonal"> Rarely &nbsp; <input
      class="radiobutton" type="radio" name="m21" value="2" personalityType="interpersonal"> Often
    &nbsp; <input class="radiobutton" type="radio" name="m21" value="3" personalityType="interpersonal"> Always
  </div>
  <p></p>
</div>
<div class="question">
  <div>22. I am good at knowing what others are feeling. </div>
  <div> <input class="radiobutton" type="radio" name="m22" value="0" personalityType="interpersonal"> Never &nbsp; <input class="radiobutton" type="radio" name="m22" value="1" personalityType="interpersonal"> Rarely &nbsp; <input
      class="radiobutton" type="radio" name="m22" value="2" personalityType="interpersonal"> Often
    &nbsp; <input class="radiobutton" type="radio" name="m22" value="3" personalityType="interpersonal"> Always
  </div>
  <p></p>
</div>
<div class="question">
  <div>26. I am good at artistic composition. </div>
  <div> <input class="radiobutton" type="radio" name="m26" value="0" personalityType="visual"> Never &nbsp; <input class="radiobutton" type="radio" name="m26" value="1" personalityType="visual"> Rarely &nbsp; <input class="radiobutton"
      type="radio" name="m26" value="2" personalityType="visual">
    Often &nbsp;
    <input class="radiobutton" type="radio" name="m26" value="3" personalityType="visual"> Always
  </div>
  <p></p>
</div>
<div>
  <a class="myButton" onclick=calculateScores()>Get Results</a>
</div>

Вот мой JavaScript:

        var bodilyScore = 0;
        var mathematicalScore = 0;
        var naturalistScore = 0;
        var interpersonalScore = 0;
        var visualScore = 0;
        var verbalScore = 0;
        var intrapersonalScore = 0;

        function calculateScores() {
          var button = document.getElementsByClassName("radiobutton");
          var buttonLength = button.length;
          musicalScore = 0;
          bodilyScore = 0;
          mathematicalScore = 0;
          naturalistScore = 0;
          interpersonalScore = 0;
          visualScore = 0;
          verbalScore = 0;
          intrapersonalScore = 0;

          for (var i = 0; i < buttonLength; i++) {
            if (button[i].type === 'radio' && button[i].checked) {
              var value = Number(button[i].value);
              var type = button[i].getAttribute("personalityType");
              switch (type) {

                case "musical":
                  musicalScore += value;
                  break;

                case "bodily":
                  bodilyScore += value;
                  break;

                case "mathematical":
                  mathematicalScore += value;
                  break;

                case "naturalist":
                  naturalistScore += value;
                  break;

                case "interpersonal":
                  interpersonalScore += value;
                  break;

                case "visual":
                  visualScore += value;
                  break;

                case "verbal":
                  verbalScore += value;
                  break;

                case "intrapersonal":
                  intrapersonalScore += value;
                  break;
              }
            }
          }
        }

Answer 1

Работает как Шарм. Вы можете использовать div или другой элемент для печати результата. могу сослаться на это. только что обновлено для длины цикла как buttonLength

var bodilyScore = 0;
   var mathematicalScore = 0;
   var naturalistScore = 0;
   var interpersonalScore = 0;
   var visualScore = 0;
   var verbalScore = 0;
   var intrapersonalScore = 0;

   function calculateScores() {
     var button = document.getElementsByClassName("radiobutton");
     var buttonLength = button.length;
     musicalScore = 0;
     bodilyScore = 0;
     mathematicalScore = 0;
     naturalistScore = 0;
     interpersonalScore = 0;
     visualScore = 0;
     verbalScore = 0;
     intrapersonalScore = 0;

     for (var i = 0; i < buttonLength; i++) {
       if (button[i].type === 'radio' && button[i].checked) {
         var value = Number(button[i].value);
         var type = button[i].getAttribute("personalityType");
         switch (type) {

           case "musical":
             musicalScore += value;
             break;

           case "bodily":
             bodilyScore += value;
             break;

           case "mathematical":
             mathematicalScore += value;
             break;

           case "naturalist":
             naturalistScore += value;
             break;

           case "interpersonal":
             interpersonalScore += value;
             break;

           case "visual":
             visualScore += value;
             break;

           case "verbal":
             verbalScore += value;
             break;

           case "intrapersonal":
             intrapersonalScore += value;
             break;
         }
       }
     }
     showResults();
   }
   
    function showResults() {
          console.log(musicalScore);
          console.log(bodilyScore);
          console.log(mathematicalScore);
          console.log(naturalistScore);
          console.log(interpersonalScore); 
          console.log(visualScore); 
          console.log(verbalScore); 
          
          document.getElementById('musicalResult').innerText = musicalScore;
          document.getElementById('bodilyResult').innerText = bodilyScore;
          document.getElementById('naturalistResult').innerText = naturalistScore;
          document.getElementById('interpersonalResult').innerText = interpersonalScore;
          document.getElementById('visualResult').innerText = visualScore;
          document.getElementById('intrapersonalResult').innerText = intrapersonalScore;
       }

<div class="question">
  <div>1. I notice and enjoy different sounds. </div>
  <div> <input class="radiobutton" type="radio" name="m1" value="0" personalityType="musical"> Never &nbsp; <input class="radiobutton" type="radio" name="m1" value="1" personalityType="musical"> Rarely &nbsp; <input class="radiobutton"
      type="radio" name="m1" value="2" personalityType="musical">
    Often
    &nbsp;
    <input class="radiobutton" type="radio" name="m1" value="3" personalityType="musical"> Always
  </div>
  <p></p>
</div>
<div class="question">
  <div>6. I learn new skills by doing them rather than reading about how to do them. </div>
  <div> <input class="radiobutton" type="radio" name="m6" value="0" personalityType="bodily"> Never &nbsp; <input class="radiobutton" type="radio" name="m6" value="1" personalityType="bodily"> Rarely &nbsp; <input class="radiobutton" type="radio"
      name="m6" value="2" personalityType="bodily">
    Often
    &nbsp; <input class="radiobutton" type="radio" name="m6" value="3" personalityType="bodily"> Always
  </div>
  <p></p>
</div>
  <div>16. I enjoy nature walks in scenic places. </div>
  <div> <input class="radiobutton" type="radio" name="m16" value="0" personalityType="naturalist"> Never &nbsp; <input class="radiobutton" type="radio" name="m16" value="1" personalityType="naturalist"> Rarely &nbsp; <input class="radiobutton"
      type="radio" name="m16" value="2" personalityType="naturalist">
    Often &nbsp;
    <input class="radiobutton" type="radio" name="m16" value="3" personalityType="naturalist"> Always
  </div>
  <p></p>
</div>
  <div>21. I like being with many friends. </div>
  <div> <input class="radiobutton" type="radio" name="m21" value="0" personalityType="interpersonal"> Never &nbsp; <input class="radiobutton" type="radio" name="m21" value="1" personalityType="interpersonal"> Rarely &nbsp; <input
      class="radiobutton" type="radio" name="m21" value="2" personalityType="interpersonal"> Often
    &nbsp; <input class="radiobutton" type="radio" name="m21" value="3" personalityType="interpersonal"> Always
  </div>
  <p></p>
</div>
<div class="question">
  <div>22. I am good at knowing what others are feeling. </div>
  <div> <input class="radiobutton" type="radio" name="m22" value="0" personalityType="intrapersonal"> Never &nbsp; <input class="radiobutton" type="radio" name="m22" value="1" personalityType="intrapersonal"> Rarely &nbsp; <input
      class="radiobutton" type="radio" name="m22" value="2" personalityType="interpersonal"> Often
    &nbsp; <input class="radiobutton" type="radio" name="m22" value="3" personalityType="intrapersonal"> Always
  </div>
  <p></p>
</div>
<div class="question">
  <div>26. I am good at artistic composition. </div>
  <div> <input class="radiobutton" type="radio" name="m26" value="0" personalityType="visual"> Never &nbsp; <input class="radiobutton" type="radio" name="m26" value="1" personalityType="visual"> Rarely &nbsp; <input class="radiobutton"
      type="radio" name="m26" value="2" personalityType="visual">
    Often &nbsp;
    <input class="radiobutton" type="radio" name="m26" value="3" personalityType="visual"> Always
  </div>
  <p></p>
</div>
<div>
  <a class="myButton" onclick="calculateScores()">Get Results</a>
</div>

<div>
<div id="musicalResult"></div>
<div id="bodilyResult"></div>
<div id="naturalistResult"></div>
<div id="interpersonalResult"></div>
<div id="visualResult"></div>
<div id="intrapersonalResult"></div>
</div>

Answer 2

Единственная проблема, которую я вижу в вашем JS, - radioButton.length. Длина радиокнопок сохраняется в buttonLength, поэтому вместо radioButton.length используйте buttonLength, и она будет работать.

Попробуйте запустить этот фрагмент

var bodilyScore = 0;
var mathematicalScore = 0;
var naturalistScore = 0;
var interpersonalScore = 0;
var visualScore = 0;
var verbalScore = 0;
var intrapersonalScore = 0;

function calculateScores() {
  debugger
  var button = document.getElementsByClassName("radiobutton");
  var buttonLength = button.length;
  musicalScore = 0;
  bodilyScore = 0;
  mathematicalScore = 0;
  naturalistScore = 0;
  interpersonalScore = 0;
  visualScore = 0;
  verbalScore = 0;
  intrapersonalScore = 0;

  for (var i = 0; i < buttonLength; i++) {
    if (button[i].type === 'radio' && button[i].checked) {
      var value = Number(button[i].value);
      var type = button[i].getAttribute("personalityType");
      debugger
      switch (type) {

        case "musical":
          musicalScore += value;
          break;

        case "bodily":
          bodilyScore += value;
          break;

        case "mathematical":
          mathematicalScore += value;
          break;

        case "naturalist":
          naturalistScore += value;
          break;

        case "interpersonal":
          interpersonalScore += value;
          break;

        case "visual":
          visualScore += value;
          break;

        case "verbal":
          verbalScore += value;
          break;

        case "intrapersonal":
          intrapersonalScore += value;
          break;
      }
    }
  }
  console.log('musicalScore', musicalScore)
  console.log('bodilyScore', bodilyScore)
  console.log('mathematicalScore', mathematicalScore)
  console.log('naturalistScore', naturalistScore)
  console.log('interpersonalScore', interpersonalScore)
  console.log('visualScore', visualScore)
  console.log('verbalScore', verbalScore)
  console.log('intrapersonalScore', intrapersonalScore)
}

function showResults() {
  document.getElementById('musicalResult').innerText = musicalScore;
  document.getElementById('bodilyResult').innerText = bodilyScore;
  document.getElementById('mathematicalResult').innerText = mathematicalScore;
  document.getElementById('naturalistResult').innerText = naturalistScore;
  document.getElementById('interpersonalResult').innerText = interpersonalScore;
  document.getElementById('visualResult').innerText = visualScore;
  document.getElementById('verbalResult').innerText = verbalScore;
  document.getElementById('intrapersonalResult').innerText = intrapersonalScore;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question">
  <div>1. I notice and enjoy different sounds. </div>
  <div> <input class="radiobutton" type="radio" name="m1" value="0" personalityType="musical"> Never &nbsp; <input class="radiobutton" type="radio" name="m1" value="1" personalityType="musical"> Rarely &nbsp; <input class="radiobutton" type="radio" name="m1"
      value="2" personalityType="musical"> Often &nbsp;
    <input class="radiobutton" type="radio" name="m1" value="3" personalityType="musical"> Always
  </div>
  <p></p>
</div>
<div class="question">
  <div>6. I learn new skills by doing them rather than reading about how to do them. </div>
  <div> <input class="radiobutton" type="radio" name="m6" value="0" personalityType="bodily"> Never &nbsp; <input class="radiobutton" type="radio" name="m6" value="1" personalityType="bodily"> Rarely &nbsp; <input class="radiobutton" type="radio" name="m6"
      value="2" personalityType="bodily"> Often &nbsp; <input class="radiobutton" type="radio" name="m6" value="3" personalityType="bodily"> Always
  </div>
  <p></p>
</div>
<div>16. I enjoy nature walks in scenic places. </div>
<div> <input class="radiobutton" type="radio" name="m16" value="0" personalityType="naturalist"> Never &nbsp; <input class="radiobutton" type="radio" name="m16" value="1" personalityType="naturalist"> Rarely &nbsp; <input class="radiobutton" type="radio" name="m16"
    value="2" personalityType="naturalist"> Often &nbsp;
  <input class="radiobutton" type="radio" name="m16" value="3" personalityType="naturalist"> Always
</div>
<p></p>
</div>
<div>21. I like being with many friends. </div>
<div> <input class="radiobutton" type="radio" name="m21" value="0" personalityType="interpersonal"> Never &nbsp;
  <input class="radiobutton" type="radio" name="m21" value="1" personalityType="interpersonal"> Rarely &nbsp; <input class="radiobutton" type="radio" name="m21" value="2" personalityType="interpersonal"> Often &nbsp; <input class="radiobutton" type="radio"
    name="m21" value="3" personalityType="interpersonal"> Always
</div>
<p></p>
</div>
<div class="question">
  <div>22. I am good at knowing what others are feeling. </div>
  <div> <input class="radiobutton" type="radio" name="m22" value="0" personalityType="interpersonal"> Never &nbsp;
    <input class="radiobutton" type="radio" name="m22" value="1" personalityType="interpersonal"> Rarely &nbsp; <input class="radiobutton" type="radio" name="m22" value="2" personalityType="interpersonal"> Often &nbsp; <input class="radiobutton" type="radio"
      name="m22" value="3" personalityType="interpersonal"> Always
  </div>
  <p></p>
</div>
<div class="question">
  <div>26. I am good at artistic composition. </div>
  <div> <input class="radiobutton" type="radio" name="m26" value="0" personalityType="visual"> Never &nbsp; <input class="radiobutton" type="radio" name="m26" value="1" personalityType="visual"> Rarely &nbsp; <input class="radiobutton" type="radio" name="m26"
      value="2" personalityType="visual"> Often &nbsp;
    <input class="radiobutton" type="radio" name="m26" value="3" personalityType="visual"> Always
  </div>
  <p></p>
</div>
<div>
  <a class="myButton" onclick=calculateScores()>Get Results</a>
</div>