Сумма массива возвращает NaN

Question

У меня есть массив с тремя значениями и 1 отдельным значением, полученным из формы.

Я пытаюсь умножить верхнее число (3) с другими (12, 3 и 31) и сложите их.

Вот что я попробовал:

HTML:

 <p>Aantal sets: <span id="dynamicSet"></span></p>
        <table id="resultTable" cellpadding="1" cellspacing="1" border="1">
            <tr>
                <th scope="col"></th>
                <th scope="col">Hoeveelheid</th>
                <th scope="col">Gewicht x KG</th>
            </tr>
            <tr>
                <td>1</td>
                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
            </tr>
            <tr>
                <td>2</td>
                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
            </tr>
            <tr>
                <td>3</td>
                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
            </tr>
        </table>

И my JS:

var HoeveelheidArr=[];
var total = 0;
const setAmount = document.getElementById("dynamicSet").innerHTML;

function getData(){
    $('#resultTable .HoeveelheidField > input ').each(function() {
        HoeveelheidArr.push($(this).val());
    });

    console.log(HoeveelheidArr);

       HoeveelheidArr.forEach(function getReps (value) {
           console.log(value);
           for(var i = 0; i < HoeveelheidArr.length; i++){
               total += value[i] * setAmount;
           }

       });
    console.log(total);
}

Однако, как вы можете видеть на картинке, я продолжаю получать не номер с консоли. Несмотря на отображение консоли, все они отображаются в виде целых? Вы видите, что я делаю не так? Я тоже попробовал:

parseInt(value[i]) 

Answer 1

Ваша переменная setAmount представляет собой строку из innerHTML.

Используйте parseInt() для обеих переменных:

total += parseInt(value[i]) * parseInt(setAmount);

Обновление

После более глубокого анализа у вас возникла пара других проблем.

• Ваша переменная setAmount равна "", поскольку она не установлена ​​в HTML.
• Вы просматриваете HoeveelheidArr дважды
• Вы должны использовать value вместо value[i]

Я сделал рабочий пример:

var HoeveelheidArr = [];
var total = 0;
const setAmount = document.getElementById("dynamicSet").innerHTML || 0;

function getData() {
  HoeveelheidArr = [];
  total = 0;
  $('#resultTable .HoeveelheidField > input').each(function() {
    HoeveelheidArr.push($(this).val() || 0);
  });

  console.log("HoeveelheidArr:", HoeveelheidArr);

  for (var i = 0; i < HoeveelheidArr.length; i++) {
    console.log("setAmount:", setAmount);
    total += parseInt(HoeveelheidArr[i]) * parseInt(setAmount);
  }

  console.log("Total:", total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Aantal sets: <span id="dynamicSet">1</span></p>
<table id="resultTable" cellpadding="1" cellspacing="1" border="1">
  <tr>
    <th scope="col"></th>
    <th scope="col">Hoeveelheid</th>
    <th scope="col">Gewicht x KG</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="HoeveelheidField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
    <td class="GewichtField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td class="HoeveelheidField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
    <td class="GewichtField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td class="HoeveelheidField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
    <td class="GewichtField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
  </tr>
</table>

<button onclick="getData()">Test</button>

Answer 2

почему вы используете значение [i] значение не является массивом, это просто число.

console.log([value[i]);

значение [1] и значение [2] не определены, поэтому вы получаете NaN

Если вы скажете мне, что вы хотите сделать с помощью этого кода, я могу исправить это