Проблемы с просмотром входов и их добавлением

Возникла проблема с peoplePaid(), проходящим через все входы с классом .persons на странице с помощью кнопки добавления. Я считаю, что эта проблема заключается в том, что #paidTotal пытается добавить содержимое из массива в .persons, но не может получить к нему доступ (дает мне неопределенную ошибку в консоли).

Эта переменная работает, но только если есть один класс .persons с переменной ...

var personsCheck = parseFloat(document.getElementsByClassName('persons')[0].value);

Однако мне нужно, чтобы он динамически зацикливал значения массива, созданного с помощью элементов .persons. Что мне не хватает?

function peoplePaid() {
  var checkTotal = parseFloat(document.getElementById('check').value);
  var personsCheck = document.getElementsByClassName('persons');
  var paidTotal = document.getElementById('paidTotal');

  for (var i = 1; i < personsCheck.length; i += 1) {
    paidTotal += personsCheck[i];
  }
  paidTotal.innerHTML = checkTotal - personsCheck;
}

$ <input type = "text" id = "check" value = "" />

<h3>Number of People: <span id = "numberOfPeople"></span></h3>

<div>
  <div id = "userNumbers">
    <input type = "text" class = "persons" name = "person">
  </div>
</div>

<button onclick = "peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
  <h3>Paid Amount: <span id = "paidTotal"></span></h3>
</div>

javascript

25.10.2018 07:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

paidTotal - это элемент. Я считаю, что вы не хотите использовать += в самом элементе. Вы должны добавить сумму к переменной.

Кроме того, поскольку индекс коллекций основан на 0, вы должны начинать значение i с 0. Вы должны взять свойство value из каждого элемента.

Пожалуйста, обрати внимание: При работе с текстовым контентом рекомендуется использовать textContent вместо innerHTML.

Попробуйте следующий способ:

function peoplePaid() {
  var checkTotal = parseFloat(document.getElementById('check').value);
  var personsCheck = document.getElementsByClassName('persons');
  var paidTotal = document.getElementById('paidTotal');
  var pCheck = 0;
  for (var i = 0; i < personsCheck.length; i += 1) {
    pCheck += personsCheck[i].value;
  }
  paidTotal.textContent = checkTotal - pCheck;
}

$ <input type = "text" id = "check" value = "" />

<h3>Number of People: <span id = "numberOfPeople"></span></h3>

<div>
  <div id = "userNumbers">
    <input type = "text" class = "persons" name = "person">
  </div>
</div>

<button onclick = "peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
  <h3>Paid Amount: <span id = "paidTotal"></span></h3>
</div>

Потрясающие. Спасибо!

— 25.10.2018 08:06

25.10.2018 07:55

В вашем коде есть ошибки:

paidTotal - это элемент, но в paidTotal += personsCheck[i]; вы использовали его как числовую переменную.
в вашем цикле индекс должен начинаться с нуля, а не с единицы.
в этой строке: paidTotal += personsCheck[i]; вы добавили элемент personsCheck[i] в paidTotal вместо его значения.

исправленный код выглядит так:

function peoplePaid() {
  var checkTotal = parseFloat(document.getElementById('check').value);
  var personsCheck = document.getElementsByClassName('persons');
  var paidTotal = 0;
  
  for (var i = 0; i < personsCheck.length; i += 1) {
    paidTotal += personsCheck[i].value * 1;
  }
  document.getElementById('paidTotal').innerHTML = checkTotal - paidTotal;
}

$ <input type = "text" id = "check" value = "" />

<h3>Number of People: <span id = "numberOfPeople"></span></h3>

<div>
  <div id = "userNumbers">
    <input type = "text" class = "persons" name = "person">
  </div>
</div>

<button onclick = "peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
  <h3>Paid Amount: <span id = "paidTotal"></span></h3>
</div>

25.10.2018 08:10

Другие вопросы по теме

Передача переменной в качестве индекса с той же строкой не сработает

Включить скрипт Google Maps при монтировании компонента в React

Javascript JQuery: объект не поддерживает свойство или метод toLowerCase

Параметр конструктора Javascript жесткого кодирования - нет-нет?

Анонимные функции внутри объекта

.replace () не работает во встроенном JavaScript

Javascript, как распечатать значение из объекта с помощью рекурсии

Ionic 3 Dynamic radio button formBuilder validation, если все выбрано, затем кнопка включения

Могу ли я использовать оператор if для отображения изменений в моем массиве (JavaScript)?

Я хочу захватить несколько изображений с помощью response-native-image-picker

Проблемы с просмотром входов и их добавлением

Ответы 2

Другие вопросы по теме

Похожие вопросы