Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.11.2014, 02:25
Новичок на форуме
Отправить личное сообщение для raposo Посмотреть профиль Найти все сообщения от raposo
 
Регистрация: 24.11.2014
Сообщений: 5

Калькулятор глюкает и не работает в 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, но что-то с этим совсем запутался...
Ответить с цитированием
  #2 (permalink)  
Старый 24.11.2014, 02:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

raposo,
var i = 1;
while (i) i++;
вы понимаите что это бесконечный цикл , заканчиваются строки а скрипт всё ищет и ищет несуществующие уже инпуты
Ответить с цитированием
  #3 (permalink)  
Старый 24.11.2014, 02:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>

Последний раз редактировалось рони, 24.11.2014 в 03:04.
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2014, 01:42
Новичок на форуме
Отправить личное сообщение для raposo Посмотреть профиль Найти все сообщения от raposo
 
Регистрация: 24.11.2014
Сообщений: 5

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

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

Насчёт вашего кода несколько вопросов:
1. Что означает плюс в +inputs[i].value это для того что-бы значение переменной считалось числом?
2. Значение указанное через || это значение, которое нужно возвращать если поле пустое?
Ответить с цитированием
  #5 (permalink)  
Старый 25.11.2014, 02:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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

и 31 и 47 строка ненужны
и inputs.length -2 минус 1 будет если 1 поле вывода оставите.
Ответить с цитированием
  #6 (permalink)  
Старый 25.11.2014, 03:25
Новичок на форуме
Отправить личное сообщение для raposo Посмотреть профиль Найти все сообщения от raposo
 
Регистрация: 24.11.2014
Сообщений: 5

Переписал по своему (не судите строго), учитывая, в меру своего понимания, некоторые ваши замечания.
Получилось вот такое:
<!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, 26.11.2014 в 00:36.
Ответить с цитированием
  #7 (permalink)  
Старый 25.11.2014, 03:27
Новичок на форуме
Отправить личное сообщение для raposo Посмотреть профиль Найти все сообщения от raposo
 
Регистрация: 24.11.2014
Сообщений: 5

И как Вы делаете что возле кода на форуме появляется кнопка "посмотреть"?
Ответить с цитированием
  #8 (permalink)  
Старый 25.11.2014, 03:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #9 (permalink)  
Старый 25.11.2014, 03:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

raposo,
[HTML run][/HTML]
Ответить с цитированием
  #10 (permalink)  
Старый 26.11.2014, 00:39
Новичок на форуме
Отправить личное сообщение для raposo Посмотреть профиль Найти все сообщения от raposo
 
Регистрация: 24.11.2014
Сообщений: 5

Поправил в том же посте
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает push! Динамическая вставка TSEH25 ExtJS 5 03.07.2012 13:00
Калькулятор с методами. Не работает)) Huruffus Общие вопросы Javascript 8 04.06.2012 00:38
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
помогите найти ошибку (работает в IE но не работает в Firefox) Len4ik Javascript под браузер 2 11.05.2010 15:41
Калькулятор работает ТОЛЬКО в ie6 (вопрос ламера) st_sinner Javascript под браузер 3 17.04.2010 18:11