Форум

angeli28 · #1 (**permalink**) 17.12.2013, 08:57

Здравствуйте, помогите найти ошибку. На сайте нужно чтобы возле каждой строки товара подсчитывалась сумма (товар выбирается по ид из сессии, кол-во всегда разное). Но подсчет идет только на первой строке пробовала for использовать с именами типа summa[1], summa[2], и т.п., но не выходит. Javascript, только начала изучать, поэтому возможно вопрос покажется многим глупым.

P.S. Если можно объясните еще как вывести в конце итоговую сумму всего выбранного

//это кнопки + и - для прибавления кол-ва товара

$(document).ready(function() {
	$('.min').click(function () {
		var $input = $(this).parent().find('input');
		var count = parseInt($input.val()) - 1;
		count = count < 1 ? 1 : count;
		$input.val(count);
		$input.change();
		return false;
	});
	$('.pl').click(function () {
		var $input = $(this).parent().find('input');
		$input.val(parseInt($input.val()) + 1);
		$input.change();
		return false;
	});	
});

// сам калькулятор		
function calc() {
	var pr = document.getElementById("pr");
	var am = document.getElementById("am");
	var summa = document.getElementById("summa");
	result = parseInt(am.value) * parseInt(pr.value);
	summa.innerHTML = result;
}

и сам html

<!--1 товар-->
<td align='center'>
	<span class='min'>-</span>
    <input type='text' value='$amount_cart' name='am' id='am' onchange='calc()'/>
	<span class='pl'>+</span>
	</td>
	<td><p class='cena'><input id='pr' name='pr' type='text' value='$myrow_catalogue[price] р.' disabled></p></td>
	<td><p class='cena'><span id='summa'>$summ</span></p></td>
.....
<!--2 товар-->
<td align='center'>
	<span class='min'>-</span>
    <input type='text' value='$amount_cart' name='am' id='am' onchange='calc()'/>
	<span class='pl'>+</span>
	</td>
	<td><p class='cena'><input id='pr' name='pr' type='text' value='$myrow_catalogue[price] р.' disabled></p></td>
	<td><p class='cena'><span id='summa'>$summ</span></p></td>
...
<!--3 товар и т.д.-->

angeli28 · #2 (**permalink**) 17.12.2013, 09:57

Сообщение от Rise

id должен быть уникален... а у вас он одинаковый у всех товаров поэтому и идет подсчет только на первой строке... ну и по поводу атрибута disabled для таких случаев есть специальный атрибут readonly.

Я поняла о чем вы, но в этом то и проблема, не получается написать такую функцию, уже пробовала, вот например:

function calc() {
	for (var i = 0; i < 10; i++)
	{
	pr = document.getElementById("pr");
	am = document.getElementById("am");
	summa[i] = document.getElementById("summa"+[i]);
	result = parseInt(am.value) * parseInt(pr.value);
	summa[i].innerHTML = result;
	}
}

ну и в html я эту i везде также вставляла, то есть массивом пробовала..
Ткните носом если не трудно, а то уже ум за разум заходит..

angeli28 · #3 (**permalink**) 17.12.2013, 10:37

Сообщение от Rise

У вас id повторяется не только у summa, но и у input-ов

Я знаю и поверьте я пробовала везде циклом с i пройтись, но этих вариантов было так много что я их все просто не выкладываю. это ошибка где то в синтаксисе (я плохо ориентируюсь в этом языке), я просто для наглядности выложила один из примеров того что делала.
Вот еще если нужно:

function calc() {
	for (var i = 0; i < 10; i++)
	{
	pr[i] = document.getElementById("pr"+[i]);
	am[i] = document.getElementById("am"+[i]);
	summa[i] = document.getElementById("summa"+[i]);
	result = parseInt(am.value) * parseInt(pr.value);
	summa[i].innerHTML = result;
	}
}

и в result тоже пробовала совать и по одиночке их использовать результат тот же, либо первая строка либо вообще не работает.

js-js · #4 (**permalink**) 17.12.2013, 13:30

как-то так

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
		<script>
		$(function() {
			$(".p").click(function() {
				var input = $(this).parent().find('input');
				if(input.val() == "")
					input.val(1);
				else {
					input.val(Number(input.val()) + 1);
					
				}
				var id = $(this).parent().parent().attr("id");
				switch(id) {
					case "tovar1": $("#summ1").html(Number(input.val()) * 340); break;
					case "tovar2": $("#summ2").html(Number(input.val()) * 520); break;
				}
			});
			$(".min").click(function() {
				var input = $(this).parent().find('input');
				if(input.val() == "")
					return;
				else {
					input.val(Number(input.val()) - 1);
					var id = $(this).parent().parent().attr("id");
					switch(id) {
						case "tovar1": $("#summ1").html(Number(input.val()) * 340); break;
						case "tovar2": $("#summ2").html(Number(input.val()) * 520); break;
					}
				}
			});
			$("input").change(function() {
				var id = $(this).parent().parent().attr("id");
				switch(id) {
					case "tovar1": $("#summ1").html(Number(this.value) * 340); break;
					case "tovar2": $("#summ2").html(Number(this.value) * 520); break;
				}
			});
		});	
		</script>
	</head>
	<body>
		<table border="1">
			<tr><th>Количество</th><th>Цена</th><th>Сумма</th></tr>
			<tr id="tovar1"><td><span class="min" style="cursor: pointer;">-</span><input type="text" size="5"><span class="p" style="cursor: pointer;">+</span></td><td>340</td><td id="summ1"></td></tr>
			<tr id="tovar2"><td><span class="min" style="cursor: pointer;">-</span><input type="text" size="5"><span class="p" style="cursor: pointer;">+</span></td><td>520</td><td id="summ2"></td></tr>
		</table>
	</body>
</html>

если будут какие-то вопросы спрашивайте

js-js · #5 (**permalink**) 17.12.2013, 20:17

Rise,
красиво

angeli28 · #6 (**permalink**) 18.12.2013, 05:14

Спасибо большое, оба варианта супер, но к сожалению из-за ограниченных знаний все же втыкаюсь.. а проект сдавать скоро. Поэтому у меня осталось еще пара глупых вопросов. Rise скажите пожалуйста, а как же полученные данные отправлять по форме, это ведь корзина, а они в виде текста.

angeli28 · #7 (**permalink**) 20.12.2013, 06:47

Все ошибки исправила и решение нашла. Спасибо

Форум

Справочник

Discord чат

Курсы javascript