Суммируйте массив типов ввода и покажите его в выводе - PullRequest
Новая
       7

Суммируйте массив типов ввода и покажите его в выводе

3 голосов
/ 07 января 2020 
<html>
<body>

<input type="text" id="array[]" oninput="myFunction(this.value)">      
<input type="text" id="array[]" oninput="myFunction(this.value)">       
<p id="result"></p>

<script>
function myFunction(val) {
  document.getElementById("result").innerHTML = val; 
}
</script>

</body>
</html>

Я хочу сложить два массива и показать его в «результате». Но в настоящее время он просто покажет один. Могу ли я узнать, как добавить два массива в javascript? Например: пользовательский ввод 1 + ввод 2, внизу будет показано 3.

Ответы [ 2 ]

2 голосов
/ 07 января 2020

Добавьте атрибут класса в элемент ввода или используйте селектор тега в querySelectorAll. затем l oop над элементом ввода и суммируем значения. 

function myFunction(val) {
    const ele = document.querySelectorAll('input');
    let sum = 0;
    ele.forEach(input => {

        sum += input.value ? parseFloat(input.value) : 0;
    });
    document.getElementById('result').textContent = sum.toFixed(2);
}
    <input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
    <input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
    <p id="result"></p>
0 голосов
/ 07 января 2020

Пожалуйста, проверьте это решение. 

<html>
<body>

<input type="text" id="array1" oninput="myFunction1(this.value)">      
<input type="text" id="array2" oninput="myFunction2(this.value)">       
<p id="result"></p>

<script>
var val1 = 0;
var val2 = 0;
var val3 = 0;
function myFunction1(val) {
  if (val !== "") {
    val1 = parseInt(val);
  } else {
    val1 = 0;
  }
    val3 = val1 + val2;
    document.getElementById("result").innerHTML = val3; 
  }

  function myFunction2(val) {
    if (val !== "") {
    val2 = parseInt(val);
  }  else {
    val2 = 0;
  }
    val3 = val1 + val2;
    document.getElementById("result").innerHTML = val3; 
  }


  </script>

  </body>
  </html>
...