Javascript-форум - Калькулятор глюкает и не работает в IE

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

- Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)

- - Калькулятор глюкает и не работает в IE (https://javascript.ru/forum/css-html-internet-explorer/51885-kalkulyator-glyukaet-i-ne-rabotaet-v-ie.html)

Калькулятор глюкает и не работает в IE

Здрасте!

Попытался написать калькулятор мощности, но, похоже, вышло кривовато. Все браузеры ругаются на "item.getElementsByTagName("input")", а IE ещё и не работает. Подскажите где косяки и как править?

Находится тут: http://e-h.com.ua/kalc.htm

<div id="cac">
<table>
<thead>
<tr><td>Устройство</td><td>Мощность</td><td>Пусковая мощность</td><td>Количество</td></tr>
</thead>
<tbody>
<tr><td colspan="4">Освещение (эквивалент 10 лам накаливания 100W</td></tr>
<tr id="item1"><td>На лампах накаливания</td><td><input type="text" value="1000" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr id="item2"><td>На энергосберегающих лампах</td><td><input type="text" value="200" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr id="item3"><td>На светодиодных лампах</td><td><input type="text" value="100" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr><td colspan="4">Системы жизнеобеспечения дома</td></tr>
<tr id="item4"><td>Дополнительный циркуляционный насос</td><td><input type="text" value="60" /></td><td><input type="text" value="120" /></td><td><input type="text"/></td></tr>
<tr id="item5"><td>Двухконтурный газовый котел (турбо)</td><td><input type="text" value="120" /></td><td><input type="text" value="200" /></td><td><input type="text"/></td></tr>
<tr id="item6"><td>Насос скважины</td><td><input type="text" value="1200" /></td><td><input type="text" value="3000" /></td><td><input type="text"/></td></tr>
<button id="but">Посчитать</button>
Результат:<input type="text" id="res" />
Реактивная:<input type="text" id="rea" />
</div>

var kalc = document.getElementById("cac"); //Определяем div в котором всё происходит
var but = document.getElementById("but"); // Определяем кнопку
var res = document.getElementById("res"); // Определяем поле для вывода результат

var doit = function(){     
    var sum = 0; //Начально значение суммы
    var maxpuskpow = 0; //Начально значение максимальной пусковой мощности
    var pow = 0; //Начально значение максимальной мощности
    
    var i = 1;
    while (i) { 
        var item = document.getElementById("item"+i); //перебираем циклом строки
        var input = item.getElementsByTagName("input"); //находим инпуты
        var pow = input[0].value; //определяем значение мощности 
        var qtt = input[2].value; //определяем количество приборов
        var sum = (pow*qtt)+sum; // Вычисляем сумму и прибавляем к ней сумму предыдущих вычеслений
        
        var puskpow = input[1].value; //определяем значение максимальной мощности 
        if(puskpow > maxpuskpow && qtt !=0){ //проверка на то указано ли количество и что мощность максимальная из отмеченных 
            var maxpuskpow = puskpow - pow;   // вычитаем из максимальной мощности номинальную
        }
        i++;
    res.value = parseInt(sum) + parseInt(maxpuskpow); // вычисляем суммарную мощность - сумма номинальных мощностей + максимальная пусковая
    }
}
but.addEventListener('click', doit); //выводим результат по клику

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

raposo,
var i = 1;
while (i) i++;
вы понимаите что это бесконечный цикл , заканчиваются строки а скрипт всё ищет и ищет несуществующие уже инпуты

raposo,
:-?

<!DOCTYPE HTML>

<html>

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

<body>
<div id="cac">
<table>
<thead>
<tr><td>Устройство</td><td>Мощность</td><td>Пусковая мощность</td><td>Количество</td></tr>
</thead>
<tbody>
<tr><td colspan="4">Освещение (эквивалент 10 лам накаливания 100W</td></tr>
<tr id="item1"><td>На лампах накаливания</td><td><input type="text" value="1000" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr id="item2"><td>На энергосберегающих лампах</td><td><input type="text" value="200" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr id="item3"><td>На светодиодных лампах</td><td><input type="text" value="100" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr><td colspan="4">Системы жизнеобеспечения дома</td></tr>
<tr id="item4"><td>Дополнительный циркуляционный насос</td><td><input type="text" value="60" /></td><td><input type="text" value="120" /></td><td><input type="text"/></td></tr>
<tr id="item5"><td>Двухконтурный газовый котел (турбо)</td><td><input type="text" value="120" /></td><td><input type="text" value="200" /></td><td><input type="text"/></td></tr>
<tr id="item6"><td>Насос скважины</td><td><input type="text" value="1200" /></td><td><input type="text" value="3000" /></td><td><input type="text"/></td></tr>
<tr><td><button id="but">Посчитать</button></td><td>
Результат:<input type="text" id="res" />
Реактивная:<input type="text" id="rea" /></td></tr></tbody></table>
</div>

<script>
var rea = document.getElementById("rea"); //max
var but = document.getElementById("but"); // Определяем кнопку
var res = document.getElementById("res"); // Определяем поле для вывода результат

var doit = function(){
   var sum = 0; //Начально значение суммы
   var maxpuskpow = 0;
   var inputs = document.getElementsByTagName("input");
   for (var i=0; i<inputs.length -2 ; i+=3)  {
      var pow = +inputs[i].value; //определяем значение мощности
      var qtt = +inputs[i+2].value||0; //определяем количество приборов
      var max = +inputs[i+1].value||pow
      sum += (pow*qtt); // Вычисляем сумму и прибавляем к ней сумму предыдущих вычеслений
      maxpuskpow +=(max*qtt)
   }
   res.value = sum;
   rea.value = maxpuskpow;
}
but.addEventListener('click', doit); //выводим результат по клику
</script>
</body>

</html>

Большое спасибо за ответ! Но вышло не совсем то что я планировал. Виноват - не тот код показал.
1. Результат должен быть только один - мощность. Второе поле я завтыкал удалить...
2. Рассчитываться результат должен по такому принципу: сумма всех основных мощностей + пусковая мощность одного (независимо от отмеченного количества) прибора с самой высокой пусковой мощностью среди выбранных минус основная мощность этого прибора.

Тоесть логика такая что-бы прибор электропитания выдерживал все включенные электроприборы, в том числе в момент их запуска (предполагая что по несколько одновременно запускаться не будут).

Насчёт вашего кода несколько вопросов:
1. Что означает плюс в +inputs[i].value это для того что-бы значение переменной считалось числом?
2. Значение указанное через || это значение, которое нужно возвращать если поле пустое?

raposo,
1.да 2.да
если нужно добавлять 1 то вместо
maxpuskpow +=(max*qtt) в строке 44
будет

if(max && qtt) sum += (max - pow);

и 31 и 47 строка ненужны
и inputs.length -2 минус 1 будет если 1 поле вывода оставите.

Переписал по своему (не судите строго), учитывая, в меру своего понимания, некоторые ваши замечания.
Получилось вот такое:

<!DOCTYPE HTML>
<html>
<head>
  <title>Калькулятор</title>
  <meta charset="utf-8"/>
</head>
<body>
<div id="calc">
<table>
<thead>
<tr><td>Устройство</td><td>Мощность</td><td>Пусковая мощность</td><td>Количество</td></tr>
</thead>
<tbody>
<tr><td colspan="4">Освещение (эквивалент 10 лам накаливания 100W</td></tr>
<tr id="item1"><td>На лампах накаливания</td><td><input type="text" value="1000" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr id="item2"><td>На энергосберегающих лампах</td><td><input type="text" value="200" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr id="item3"><td>На светодиодных лампах</td><td><input type="text" value="100" /></td><td><input type="text" /></td><td><input type="text"/></td></tr>
<tr><td colspan="4">Системы жизнеобеспечения дома</td></tr>
<tr id="item4"><td>Дополнительный циркуляционный насос</td><td><input type="text" value="60" /></td><td><input type="text" value="120" /></td><td><input type="text"/></td></tr>
<tr id="item5"><td>Двухконтурный газовый котел (турбо)</td><td><input type="text" value="120" /></td><td><input type="text" value="200" /></td><td><input type="text"/></td></tr>
<tr id="item6"><td>Насос скважины</td><td><input type="text" value="1200" /></td><td><input type="text" value="3000" /></td><td><input type="text"/></td></tr>
</tbody>
</table>
<button id="but">Посчитать</button>
Результат:<input type="text" id="res" />
</div>
<script>
var but = document.getElementById("but"); // Определяем кнопку
var res = document.getElementById("res"); // Определяем поле для вывода результат

var doit = function(){     
    var sum = 0; //Начально значение суммы
    var maxpuskpow = 0; //Начально значение максимальной пусковой мощности
    var pow = 0; //Начально значение максимальной мощности
    var div = document.getElementById("calc");
    var rows = div.getElementsByTagName("tr");
    for(var n=0; n<rows.length; n++){
        var inputs = rows[n].getElementsByTagName("input");
        if (inputs.length == 3){ //Проверяем что-бы в этой строчке были инпуты
            var pow = inputs[0].value;//определяем значение мощности
            var qtt = inputs[2].value; //определяем количество приборов
            var sum = (pow*qtt)+sum; // Вычисляем сумму и прибавляем к ней сумму предыдущих вычеслений
            
            var puskpow = inputs[1].value; //определяем значение максимальной мощности
            if(puskpow > maxpuskpow && qtt !=0){ //проверка на то указано ли количество и что мощность максимальная из отмеченных 
            var maxpuskpow = puskpow - pow;   // вычитаем из максимальной мощности номинальную
            }
        res.value = sum + maxpuskpow; // вычисляем суммарную мощность - сумма номинальных мощностей + максимальная пусковая
        }
    }
}
but.addEventListener('click', doit); //выводим результат по клику
</script>
</body>
</html>

Вроде работает так как и хотел.
Что скажите по качеству кода, не сильно коряво вышло?

И как Вы делаете что возле кода на форуме появляется кнопка "посмотреть"? :)

raposo,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

raposo,

[HTML run][/HTML]

Поправил в том же посте