Ошибка в калькуляторе
Здравствуйте, помогите найти ошибку. На сайте нужно чтобы возле каждой строки товара подсчитывалась сумма (товар выбирается по ид из сессии, кол-во всегда разное). Но подсчет идет только на первой строке пробовала 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 товар и т.д.-->
|
Цитата:
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 везде также вставляла, то есть массивом пробовала.. Ткните носом если не трудно, а то уже ум за разум заходит.. |
Цитата:
Вот еще если нужно: 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 тоже пробовала совать и по одиночке их использовать результат тот же, либо первая строка либо вообще не работает. |
как-то так
<!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,
красиво |
Спасибо большое, оба варианта супер, но к сожалению из-за ограниченных знаний все же втыкаюсь.. а проект сдавать скоро. Поэтому у меня осталось еще пара глупых вопросов. Rise скажите пожалуйста, а как же полученные данные отправлять по форме, это ведь корзина, а они в виде текста.
|
Все ошибки исправила и решение нашла. Спасибо
|
| Часовой пояс GMT +3, время: 14:57. |