Не могу найти ошибку в скрипте

@avatar0087 · Регистрация: 22.01.2020

Студворк — интернет-сервис помощи студентам

Есть такой html-code:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
      <table>
            <tr>
              <td>Product name</td>
              <td>Price</td>
              <td>Quantity</td>
              <td>Total by position</td>
            </tr>
                        
            <tr>
               <td>Product1</td>
               <td class="price">3</td>
               <td><input type="number" id="month-amount" name="quantity" value="1" min="1" max="6" ></td>
               <td><input type="number" id="pos" name="position" readonly></td>
            </tr>
                        
            <tr>
                <td>Product2</td>
                <td class="price">2</td>
                <td><input type="number" id="month-amount" name="quantity" value="1" min="1" max="6"></td>
                <td><input type="number" id="pos" name="position" readonly></td>
            </tr>              
                </table>
                    
                <input type="text" id="totalPrice" readonly/>
                <input type="button" value="Count" id="orderTotal"/>

И к нему такой скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
   var table1 = document.querySelector("table"); 
        var quantities = table1.querySelectorAll("input[name=quantity]");
 
        for (var i = 0; i < quantities.length; i++)
            quantities[i].onchange = quantity_change;
            quantity_change();
            quantity_change_change(i);
 
        function quantity_change() {
            var totalPrice = 0;
            for (var i = 0; i < quantities.length; i++) {
                totalPrice += table1.rows[i + 1].cells[1].textContent
                    * table1.rows[i + 1].cells[2].firstElementChild.value;
            }
            document.querySelector("#totalPrice").setAttribute('value', totalPrice);
        }
 
        function quantity_change_change(i) {
            var totalPrice = 0;
    
                totalPrice = table1.rows[i + 1].cells[1].textContent
                    * table1.rows[i + 1].cells[2].firstElementChild.value;
            
            document.querySelectorAll("#position")[i].setAttribute('value', totalPrice);
        }

Необходимо в ячейке Total by position вывести значение Price * Quantity для это позиции при изменении количества для этой позиции.

@fixeri · 28.01.2020, 12:24

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td>Product name</td>
            <td>Price</td>
            <td>Quantity</td>
            <td>Total by position</td>
        </tr>
        <tr>
            <td>Product1</td>
            <td class="price">3</td>
            <td><input type="number" class="month-amount" name="quantity" value="1" min="1" max="6" ></td>
            <td><input type="number" class="pos" name="position" readonly></td>
        </tr>
        <tr>
            <td>Product2</td>
            <td class="price">2</td>
            <td><input type="number" class="month-amount" name="quantity" value="1" min="1" max="6"></td>
            <td><input type="number" class="pos" name="position" readonly></td>
        </tr>              
    </table>
    <input type="text" id="totalPrice" readonly/>
    <input type="button" value="Count" id="orderTotal"/>
    
    <script type="text/javascript">
        "use strict";
 
        var table1 = document.querySelector("table"); 
        var quantities = table1.querySelectorAll("input[name=quantity]");
        var positions = document.querySelectorAll(".pos");
 
        quantity_change();
 
        for (var i = 0; i < quantities.length; i++) {
            quantities[i].onchange = handEvChange.bind(null, i);
            quantity_change_change(i);
        }
        
        function handEvChange(i) {
            quantity_change_change(i);
            quantity_change();
        }
 
        function quantity_change() {
            var totalPrice = 0;
            for (var i = 0; i < quantities.length; i++) {
                totalPrice += table1.rows[i + 1].cells[1].textContent * table1.rows[i + 1].cells[2].firstElementChild.value;
            }
            document.querySelector("#totalPrice").setAttribute('value', totalPrice);
        }
 
        function quantity_change_change(i) {
            var totalPrice = 0;
            totalPrice = table1.rows[i + 1].cells[1].textContent * table1.rows[i + 1].cells[2].firstElementChild.value;
            positions[i].setAttribute('value', totalPrice);
        }
    </script>
</body>
</html>

@amr-now · 28.01.2020, 12:59

avatar0087, fixeri, если скрипт поместить в <head>, то начинается веселье с неизвестными на данный момент списками.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
document.addEventListener("DOMContentLoaded", onLoad);
var table1, prices, quantities, positions;
function onLoad() {
    table1 = document.querySelector("table");
    quantities = table1.querySelectorAll("input[name=quantity]");
    prices = table1.querySelectorAll(".price");
    positions = table1.querySelectorAll("input[name=position]");
    for (var i = 0; i < quantities.length; i++) {
        quantities[i].onchange = quantity_change;
        positions[i].value =
            (+prices[i].textContent * +(quantities[i].value)).toString();
    }
    calculateTotal();
}
function quantity_change() {
    var tr = this.parentElement.parentElement; // Текущая строка
    tr.querySelector("input[name=position]").value = tr.querySelector(".price").textContent
        * tr.querySelector("input[name=quantity]").value;
    calculateTotal();
}
function calculateTotal() {
    var totalPrice = 0;
    for (var i = 0; i < positions.length; i++) {
        totalPrice += +positions[i].value || 0;
    }
    document.querySelector("#totalPrice").value = totalPrice.toString();
}

Вынес объявления пустых переменных наружу из функций.

@avatar0087 · 28.01.2020, 14:54 **[ТС]**

Больше спасибо, fixeri! Все работает как надо.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@avatar0087 0 / 0 / 0 Регистрация: 22.01.2020 Сообщений: 9
	28.01.2020, 14:54 [ТС]
	Больше спасибо, fixeri! Все работает как надо. 0

Не могу найти ошибку в скрипте

Решение