Форум

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 товар и т.д.-->

Rise · #2 (**permalink**) 17.12.2013, 09:29

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

angeli28 · #3 (**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 везде также вставляла, то есть массивом пробовала..
Ткните носом если не трудно, а то уже ум за разум заходит..

Rise · #4 (**permalink**) 17.12.2013, 10:15

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

angeli28 · #5 (**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 · #6 (**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>

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

Rise · #7 (**permalink**) 17.12.2013, 18:09

angeli28, учись студент:

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<style>
#goods {text-align:center;}
#goods td {border:1px solid #ccc;}
#goods td.minus, #goods td.plus {width:20px;cursor:pointer;}
#goods td.eq {width:20px;}
#goods td.amount {width:60px;}
#goods td.price, #goods td.result {width:100px;}
</style>

<table id="goods">
	<tr>
		<td class="minus">−</td>
		<td class="amount">0</td>
		<td class="plus">+</td>
		<td class="price">1000.00</td>
		<td class="eq">=</td>
		<td class="result">0</td>
	</tr>
	<tr>
		<td class="minus">−</td>
		<td class="amount">0</td>
		<td class="plus">+</td>
		<td class="price">2000.00</td>
		<td class="eq">=</td>
		<td class="result">0</td>
	</tr>
	<tr>
		<td class="minus">−</td>
		<td class="amount">0</td>
		<td class="plus">+</td>
		<td class="price">3000.00</td>
		<td class="eq">=</td>
		<td class="result">0</td>
	</tr>
	<tr>
		<td colspan="5">Итого</td>
		<td class="itogo">0</td>
	</tr>
<table>

<script>
$(function() {

	$('#goods td.minus, #goods td.plus').click(function () {
		var theElem = $(this);
		var amountElem = theElem.siblings('.amount');
		var priceElem  = theElem.siblings('.price');
		var resultElem = theElem.siblings('.result');
		var itogoElem  = $('#goods td.itogo');

		var amountNum = +amountElem.text();
		var priceNum  = +priceElem.text();
		var resultNum = +resultElem.text();
		var itogoNum  = +itogoElem.text();

		switch (true) {
			case theElem.hasClass('plus'):
				resultNum = ++amountNum * priceNum;
				itogoNum += priceNum;
				break;
			case theElem.hasClass('minus'):
				if (!amountNum) break;
				resultNum = --amountNum * priceNum;
				itogoNum -= priceNum;
		}

		amountElem.text(amountNum);
		resultElem.text(resultNum.toFixed(2));
		itogoElem.text(itogoNum.toFixed(2));
	});

	$('#goods td.plus').trigger('click');

});
</script>

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

Rise,
красиво

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

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

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

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

Форум

Справочник

Discord чат

Курсы javascript