Блог

Главная - Вопросы по программированию - Расчет общей цены с помощью Javascript

Расчет общей цены с помощью Javascript

#javascript #html

Вопрос:

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

 function multiply() {
    var u_price = parseFloat(document.getElementsByName("u-price"));
    var s_meter = parseFloat(document.getElementsByName("s-meter"));
    var t = u_price * s_meter;
    document.getElementById("tot-price").value = t.toFixed(3);
} 
 <tr>
  <td><input type="text" class="input-box" name="u-price" value="0" onKeyUp="multiply();"></td>
  <td><input type="text" class="input-box" name="s-meter" value="1" onKeyUp="multiply();"></td>
  <td><input type="text" class="input-box" name="tot-price" id="tot-price" disabled></td>
</tr>

Возвращаемое значение равно NaN.

введите описание изображения здесь

Не могли бы вы, пожалуйста, посоветовать, как с этим справиться.

Заранее благодарю вас!

Комментарии:

1. getElementsByName возвращает коллекцию элементов, а коллекция не может быть проанализирована для перемещения

2. Шаг 1 при попытке использовать функцию: Прочитайте руководство для используемой функции и обратите внимание, что возвращает функция: developer.mozilla.org/en-US/docs/Web/API/Document/… . В этом случае было бы более разумно присвоить каждому элементу уникальный идентификатор и получить их по идентификатору. Также вам нужно получить .value (в соответствии с вашим последующим использованием getElementById) не сам элемент.

3. Кроме того, в более широком смысле, откажитесь от привычки использовать устаревшие встроенные обработчики событий в HTML и научитесь использовать addEventListener для создания более удобного кода.

Ответ №1:

Требуется пара изменений:

  1. getElementsByName возвращает массив элементов, соответствующих параметру name.
    поэтому, если вы используете этот метод, вам следует изменить его на getElementsByName[0] и убедиться, что у вас есть только один соответствующий элемент (т. Е. — никаких других элементов с соответствующим именем).
  2. Ты забыл .value

Таким образом, ваша функция должна выглядеть следующим образом —

 function multiply() {
    var u_price = parseFloat(document.getElementsByName("u-price")[0].value);
    var s_meter = parseFloat(document.getElementsByName("s-meter")[0].value);
    var t = u_price * s_meter;
    document.getElementById("tot-price").value = t.toFixed(3);
}

Комментарии:

1. Примечание: getElementsByName возвращает (в реальном времени) Список узлов, а не массив.

Ответ №2:

document.getElementsByName возвращает массив элементов с этим именем, и, следовательно, нам нужно получить доступ к значению первого элемента этого массива.

Вместо document.getElementsByName("u-price") ,

Вам придется использовать document.getElementsByName("u-price")[0].value , чтобы получить значение.

Комментарии:

1.Примечание: getElementsByName возвращает (в реальном времени) Список узлов, а не массив.

2. Вы правы. Я описал его в более простых терминах, потому что он также принимает операции с массивами и также может быть преобразован.

Метки: