Javascript-форум - Неполадка в работе программы автоматизации расчета кол-ва плиток

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Неполадка в работе программы автоматизации расчета кол-ва плиток (https://javascript.ru/forum/misc/76135-nepoladka-v-rabote-programmy-avtomatizacii-rascheta-kol-va-plitok.html)

Неполадка в работе программы автоматизации расчета кол-ва плиток

ЗДРАВия всем! вот делая програмку (по обучающей методике программирования Ильи Кантора) автоматизации подСЧЕТа плитки в метрах на стены. комната=формы паралограм (это как кубик НО других размеров). на пол и потолок не надо подСЧЕТа. УМНОЖИЛ размеры, а дальше компютер сам СУММИРУЕТ. все годно суммирует в таблице в метрах и результат сразу видно. НО нужно еще таблица для подсчета 20 сантиметровых плиток. и такое смастерил. тоже ГОДНО работает но перестала работать метровая таблица. по разному переставлял местами яваскрипт и хтмл <табле>. не понимаю почему только одна таблица работает Мастера программ, помогите наладить работу программы, чтобы обе таблицы работали

Как вам получить документ ХТМЛ, чтобы оно было как у меня в компюторе?
1.в компюторе на РАБОЧИЙ СТОЛ создать новый документ через правую кнопку Создать > Текстовый документ
2.на РАБОЧЕМ СТОЛЕ появился документ и под ним ящик с текстом= Новый текстовый документ.txt
3.ВАЖНО удалить из ящика ВЕСЬ текст полностью и напечатать= таблица расчетов.html и подтвердить
4.теперь через правую кнопку Открыть с помощью > Блокнот и копировать этот текст в программу

Код:

начало

<table border=1 cellpadding=8 cellspacing=0><tr>
<td>ШЫРИНА (м)</td>
<td>ВЫСОТА (м)</td>
<td>ДЛИНА (м)</td>
</tr><tr><td><input ID=ШИРИНА></td>
<td><input ID=ВЫСОТА></td>
<td><input ID=ДЛИНА></td></tr>
<tr></tr>
<tr></tr>
<tr>
<td>ИТОГО</td>
<td ID=ИТОГО></td>
<td>шт.</td>
</tr>
</table>
<br>
<table border=1 cellpadding=8 cellspacing=0><tr>
<td>ШЫРИНА (20cм)</td>
<td>ВЫСОТА (20cм)</td>
<td>ДЛИНА (20cм)</td>
</tr><tr><td><input ID=ШИРИНА20></td>
<td><input ID=ВЫСОТА20></td>
<td><input ID=ДЛИНА20></td></tr>
<tr></tr>
<tr></tr>
<tr>
<td>ИТОГО</td>
<td ID=ИТОГО20></td>
<td>шт.</td>
</tr>
</table>
<script>

//ПРОВЕРКА УМНОЖЕНИЯ
// alert(
// '2 × 2 = 2² = 4 = '+(2**2)+`
// `+
// '2 × 0 = 2⁰ = 1 = '+(2**0)
// );

document . oninput=function( ){

ВПЕРЕДИ= ШИРИНА.value**ВЫСОТА.value
ВЗАДИ= ШИРИНА.value**ВЫСОТА.value
СПРАВА= ДЛИНА.value**ВЫСОТА.value
СЛЕВА= ДЛИНА.value**ВЫСОТА.value

ИТОГО.innerHTML= ВПЕРЕДИ+ВЗАДИ+СПРАВА+СЛЕВА
}

document . oninput=function( ){

ВПЕРЕДИ= ШИРИНА20.value**ВЫСОТА20.value
ВЗАДИ= ШИРИНА20.value**ВЫСОТА20.value
СПРАВА= ДЛИНА20.value**ВЫСОТА20.value
СЛЕВА= ДЛИНА20.value**ВЫСОТА20.value

ИТОГО20.innerHTML= ВПЕРЕДИ+ВЗАДИ+СПРАВА+СЛЕВА
}

</script>

Код:

окончание

СТОП!
6.Теперь сохранить блокнот, а затем нажать нажать на этот документ и откроется в интернете эти таблицы.

Неполадка описана в начале, шаги написал, как сам запускаю, текст программы у вас блокноте, программа в интернете. БЛАГОдарю зараннее за любую помощь.

Павел Васильевич,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<table border=1 cellpadding=8 cellspacing=0><tr>
 <td>ШЫРИНА (м)</td>
 <td>ВЫСОТА (м)</td>
 <td>ДЛИНА (м)</td>
 </tr><tr><td><input ID=ШИРИНА></td>
 <td><input ID=ВЫСОТА></td>
 <td><input ID=ДЛИНА></td></tr>
 <tr></tr>
 <tr></tr>
 <tr>
 <td>ИТОГО</td>
 <td ID=ИТОГО></td>
 <td>шт.</td>
 </tr>
 </table>
 <br>
 <table border=1 cellpadding=8 cellspacing=0><tr>
 <td>ШЫРИНА (20cм)</td>
 <td>ВЫСОТА (20cм)</td>
 <td>ДЛИНА (20cм)</td>
 </tr><tr><td><input ID=ШИРИНА20></td>
 <td><input ID=ВЫСОТА20></td>
 <td><input ID=ДЛИНА20></td></tr>
 <tr></tr>
 <tr></tr>
 <tr>
 <td>ИТОГО</td>
 <td ID=ИТОГО20></td>
 <td>шт.</td>
 </tr>
 </table>
 <script>
var table = document.querySelectorAll('table');
table[0].addEventListener('input', function() {
var ВПЕРЕДИ= ШИРИНА.value**ВЫСОТА.value
var ВЗАДИ= ШИРИНА.value**ВЫСОТА.value
var СПРАВА= ДЛИНА.value**ВЫСОТА.value
var СЛЕВА= ДЛИНА.value**ВЫСОТА.value

ИТОГО.innerHTML= ВПЕРЕДИ+ВЗАДИ+СПРАВА+СЛЕВА
   });


table[1].addEventListener('input', function() {
var ВПЕРЕДИ= ШИРИНА20.value**ВЫСОТА20.value
var ВЗАДИ= ШИРИНА20.value**ВЫСОТА20.value
var СПРАВА= ДЛИНА20.value**ВЫСОТА20.value
var СЛЕВА= ДЛИНА20.value**ВЫСОТА20.value
ИТОГО20.innerHTML= ВПЕРЕДИ+ВЗАДИ+СПРАВА+СЛЕВА
});
 </script>
</body>
</html>

ТО, что надо. Благодарю ВАС. Разобрал Ваш пример. Понял, в чем была ошибка. Буду разбирать, как единожды вводить ФОРМУЛУ ВЫЧИСЛЕНИЯ ЕДИНИЦ ПЛОЩАДИ ПОВЕРХНОСТИ ПАРАЛОПИПЕДА, ведь она одна на все таблицы.

Цитата:

Сообщение от Павел Васильевич

Понял, в чем была ошибка.

на всякий случай, у вас 2 раза document.oninput - свойство oninput не может быть одновременно разным.
можно было document.addEventListener('input', function() { ... }) 2 раза, с разным содержимым, тогда работало бы, но меняло во всех таблицах сразу.

Цитата:

Сообщение от Павел Васильевич

одна на все таблицы.

делегирование