Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   не удается получить значения с input и посчитать их сумму (https://javascript.ru/forum/events/63858-ne-udaetsya-poluchit-znacheniya-s-input-i-poschitat-ikh-summu.html)

kolobku_xxx 04.07.2016 19:24

не удается получить значения с input и посчитать их сумму
 
Здравствуйте, форумчане!
получаю ошибку TypeError: itemCount is null
ругается на строчку count += (itemCount.value);
скрипт поместила перед закрывающимся тегом боди.
подскажите в чем ошибка :)
<div id="wrapper">
     		<table>
			<tr class="item_box">
	        <td class="item_title">Кукла Dolly</div>
	        <td class="item_count"><input type="text" id="item0" value="0"/></td>
	        <td class="item_price0">500</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">Кукла Jesika</h3>
	        <td class="item_count"><input type="text" id="item1" value="0" /></td>
	        <td class="item_price1">1000</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">Кукла Anna</h3>
	        <td class="item_count"><input type="text" id="item2" value="0" /></td>
	        <td class="item_price2">1000</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">ИТОГО</h3>
	        <td class="item_count"><input type="text" id="count" value="0" /></td>
	        <td class="all_price">0</td>
	    	</tr>
	    	</table>
	    	<p><button id="checkout" onclick="calc()">Подсчитать</button> &nbsp; <button id="clear_cart">Снять выбор</button></p>
		</div>

function calc() 
			{
				var count = 0; sum = 0, N = 3;		
				for( i = 0; i < N; i++ ) 
				{
					var itemCount = document.getElementById('item'+i+1);								
					var itemPrice = document.getElementById('item_price'+i+1);  
					count += (itemCount.value);      /*количество заказанных услуг*/ 			
					sum += (itemCount.value)*(itemPrice.value);     /*посчитали общую сумму */
				}
				document.getElementById('count').value = count;  /*записывем в форму количество выбранных позиций*/
				document.getElementById('all_price').innerHTML = sum;
				}

рони 04.07.2016 19:53

kolobku_xxx,
6 ошибок в скрипте, 4 в html - :(

Rasy 04.07.2016 19:57

kolobku_xxx,
в html коде ошибок мама не горюй

рони 04.07.2016 20:01

Rasy,
больше 4 ?

Rasy 04.07.2016 20:06

рони,
точно не меньше)

kolobku_xxx 04.07.2016 20:17

ошибки по html исправила, спасибо.
теперь ругается на значение другой переменной TypeError: itemPrice is null
<div id="wrapper">
     		<table>
			<tr class="item_box">
	        <td class="item_title">Кукла Dolly</td>
	        <td class="item_count"><input type="text" id="item0" value="0"/></td>
	        <td class="item_price0">500руб.</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">Кукла Jesika</td>
	        <td class="item_count"><input type="text" id="item1" value="0" /></td>
	        <td class="item_price1">1000руб.</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">Кукла Anna</td>
	        <td class="item_count"><input type="text" id="item2" value="0" /></td>
	        <td class="item_price2">1000руб.</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">ИТОГО</td>
	        <td class="item_count"><input type="text" id="count" value="0" /></td>
	        <td class="all_price">0руб.</td>
	    	</tr>
	    	</table>
	    	<p><button id="checkout" onclick="calc()">Подсчитать</button> &nbsp; <button id="clear_cart">Снять выбор</button></p>
		</div>

function calc() 
			{
				var count = 0; sum = 0, N = 3;		
				for( i = 1; i < N; i++ ) 
				{
					var itemCount = document.getElementById('item'+i);								
					var itemPrice = document.getElementById('item_price'+i);  
					count += (itemCount.value);      /*количество заказанных услуг*/ 			
					sum += (itemCount.value)*(itemPrice.value);     /*посчитали общую сумму */
				}
				document.getElementById('count').value = count;  /*записывем в форму количество выбранных позиций*/
				document.getElementById('all_price').innerHTML = sum;
				}

рони 04.07.2016 20:32

kolobku_xxx,
строка 7 нет таких id , есть класс
строка 8 нет числа, есть строка нужно число
строка 9 нет числа + нет value
строка 12 нет такого id , есть класс

рони 04.07.2016 20:54

:write:
<!DOCTYPE html>

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

<body>
<div id="wrapper">
     		<table>
			<tr class="item_box">
	        <td class="item_title">Кукла Dolly</td>
	        <td class="item_count"><input type="text" id="item0" value="0"/></td>
	        <td class="item_price0">500</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">Кукла Jesika</td>
	        <td class="item_count"><input type="text" id="item1" value="0" /></td>
	        <td class="item_price1">1000</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">Кукла Anna</td>
	        <td class="item_count"><input type="text" id="item2" value="0" /></td>
	        <td class="item_price2">1000</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">ИТОГО</td>
	        <td class="item_count"><input type="text" id="count" value="0" /></td>
	        <td class="all_price">0</td>
	    	</tr>
	    	</table>
	    	<p><button id="checkout" onclick="calc()">Подсчитать</button> &nbsp; <button id="clear_cart">Снять выбор</button></p>
		</div>
<script>
  function calc()
			{
				var count = 0; sum = 0, N = 3;
				for( i = 0; i < N; i++ )
				{
					var itemCount = document.getElementById('item'+ i);
					var itemPrice = document.querySelector('.item_price'+i);
					count += (+itemCount.value||0);      /*количество заказанных услуг*/
					sum += (+itemCount.value||0)*(+itemPrice.innerHTML||0);     /*посчитали общую сумму */
				}
				document.getElementById('count').value = count;  /*записывем в форму количество выбранных позиций*/
				document.querySelector('.all_price').innerHTML = sum;
				}

</script>

</body>
</html>

kolobku_xxx 05.07.2016 18:21

Спасибо за помощь. :)
<div id="wrapper">
     		<table>
			<tr class="item_box">
	        <td class="item_title">Кукла Dolly</td>
	        <td class="item_count"><input type="text" id="item0" value="0"/></td>
	        <td class="item_price">500</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">Кукла Jesika</td>
	        <td class="item_count"><input type="text" id="item1" value="0" /></td>
	        <td class="item_price">1000</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">Кукла Anna</td>
	        <td class="item_count"><input type="text" id="item2" value="0" /></td>
	        <td class="item_price">1000</td>
	    	</tr>
	    	<tr class="item_box">
	        <td class="item_title">ИТОГО</td>
	        <td id="item_count"></td>
	        <td id="all_price"></td>
	    	</tr>
	    	</table>
	    	<p><button id="checkout" onclick="calc()">Подсчитать</button> &nbsp; <button id="clear_cart">Снять выбор</button></p>
		</div>

function calc() 
			{
				var count = 0; sum = 0, N = 3;		
				for( i = 0; i < N; i++ ) 
				{
					var itemCount = document.getElementById('item'+i);								
					var itemPrice = document.getElementsByClassName('item_price')[i];  
					count += (+itemCount.value || 0);      /*количество заказанных услуг*/ 			
					sum += (+itemCount.value || 0)*(itemPrice.innerHTML || 0);     /*посчитали общую сумму */
				}
				document.getElementById('item_count').innerHTML = count;  /*записывем в форму количество выбранных позиций*/
				document.getElementById('all_price').innerHTML = sum;
				}


Часовой пояс GMT +3, время: 20:35.