Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Суммирование чисел (https://javascript.ru/forum/dom-window/63027-summirovanie-chisel.html)

Янковиц 13.05.2016 09:27

Суммирование чисел
 
Добрый день. У меня на странице есть вот такой html код:
<div class="summa"></div>
<div class="product1">
<div class="price">100</div>
<a data-id="633" class="buy-now" onclick="return cart.add(this)">Купить</a>
</div>
<div class="product2">
<div class="price">200</div>
<a data-id="632" class="buy-now" onclick="return cart.add(this)">Купить</a>
</div>
Мне необходимо, чтобы при клике на гипперссылку в блок summa выходило число из блока price. Подскажите пожалуйста, кто делал подобное. В блоке summa может быть ничего или любое число.

Dilettante_Pro 13.05.2016 10:37

Янковиц,
<div class="summa"></div>
<div class="product1">
<div class="price">100</div>
<a data-id="633" class="buy-now" onclick="add(this)">Купить</a>
</div>
<div class="product2">
<div class="price">200</div>
<a data-id="632" class="buy-now" onclick="add(this)">Купить</a>
</div>
<script>
function add(elem) {
    document.getElementsByClassName('summa')[0].innerHTML =  elem.parentElement.getElementsByClassName('price')[0].innerHTML;
}
</script>

Только странно: ни выбора продуктов, ни количеств... Голое число, неизвестно к чему относящееся
И где же суммирование?
Цитата:

при клике на гипперссылку в блок summa выходило число из блока price

Янковиц 13.05.2016 10:40

Это лишь часть кода. Количество и т.д. все уже работает. Осталась только корзина. Здорово, но немного не то. Нужно, чтобы суммировались числа. Кликнул по одной(+100), добавляет в блок summa 100, кликнул по другой (+200), стало в блоке summa 300. И так далее. Извините если неясно выразился.

Dilettante_Pro 13.05.2016 11:03

<div class="summa"></div>
<div class="product1">
<div class="price">100</div>
<a data-id="633" class="buy-now" onclick="add(this)">Купить</a>
</div>
<div class="product2">
<div class="price">200</div>
<a data-id="632" class="buy-now" onclick="add(this)">Купить</a>
</div>
<script>
    function add(elem) {
        var res = document.getElementsByClassName('summa')[0],
            price = parseInt(elem.parentElement.getElementsByClassName('price')[0].innerHTML),
            sum = parseInt(res.innerHTML) | 0;
        res.innerHTML = sum + price;
          }
</script>

Янковиц 13.05.2016 11:05

:dance: :thanks:

laimas 13.05.2016 11:39

<a data-id="632" class="buy-now" data-price="XXX" onclick="return cart.add(this)">Купить</a>

Зачем тревожить другие элементы, если в функцию передается this, которое и само с успехом может хранить цену.

Dilettante_Pro 13.05.2016 11:58

laimas,
В этом коде и все остальное не имеет особого смысла, так что...

laimas 13.05.2016 13:43

Цитата:

Сообщение от Dilettante_Pro
В этом коде и все остальное не имеет особого смысла

Да это я торговцу адресовал, а имеет, не имеет, это уже его головная боль. )

Янковиц 13.05.2016 16:08

Вот так работает:
<a data-id="632" class="buy-now" data-price="XXX" onclick="add(this)">Купить</a>
а так нет
<a data-id="632" class="buy-now" data-price="XXX" onclick="return cart.add(this)">Купить</a>
А в чем разница?
И если data-price="XXX" лучше, как это реализовать?

laimas 13.05.2016 18:05

Зачем вот это data-id="632"? Уж точно это ID товара и используется в скрипте, точно также атрибутом data-price можно передавать с скрипт и цену товара.

Янковиц 13.05.2016 20:46

Это все понимаю, но в javascript я полный ноль. Получение данных их data-price также как document.getElementsByClassName? Кстати говоря ID товара я изначально не знаю.

laimas 14.05.2016 01:40

Вам и не нужно знать ID товара, вам нужно оперировать ID, точно также как и ценой. Добавление товара в корзину, это как раз поместить в нее ID товара и его количество, цена товара при этом в корзине может и отсутствовать.

У вас прописано onclick="return cart.add(this)", то есть в функцию передается ссылка на сам объект, что в самой функции будет ее аргументом. Вот этот аргумент и хранит все свои атрибуты, которые и нужно получать, и которые в скрипте думаю получают (ID товара). Использовать document.getElementsByClassName и прочее нет необходимости, как и совсем не понятно к чему приляпан return.

Вы функцию эту хотя бы по коду нашли и показали.

Янковиц 14.05.2016 10:29

Теперь совсем запутался. Дело в тос, что если я не использую onclick="return cart.add(this)", то при нажатии на кнопку "Купить" происходит переадресация в корзину, чего очень не хотелось бы. А вот сам скрипт отмены переадресации и добавления товара в корзину.
script>
var cart = {};
$(document).ready(function(){
cart.add = function(btn) {
                    var $btn = $(btn);
                    var productId = $btn.data('id');
                    $.get('/cart?add=' + productId, function() {
                    });
                    return false;
                };
});</script
>

laimas 14.05.2016 10:43

Ну если используется jQuery, то в thml:

<a data-id="633" data-price="тут_цена_товара" class="buy-now" onclick="return cart.add(this)">Купить</a>

Цена указанная в DIV только для информации пользователю.

В JS:

$(document).ready(function(){
все касаемо функции cart.add выбросить, ну или тогда уж ООП и методы
};

и так:

$(document).ready(function(){
    $('a[data-id]').click(function(e) {
        e.preventDefault(); //только если кнопка имеет атрибут href, иначе не надо
        var b = $(this);
        $.get('/cart?add=' + b.data('id'), function(data) {
            //если после ответа сервера нужно считать сумму набранного,
            //то цена этого товара = +b.data('price')     
        });
        //а если посчитать не дожидаясь ответа, то все равно цена, это +b.data('price')
        //считайте на здоровье, собственно и сервер мог бы готовый расчет вернуть 
        //в зависимости от того, добавлен или нет товар в корзину, 
        //а серверу не нужна цена от клиента, он ее знает сам      
    });
});

Янковиц 14.05.2016 19:23

Жаль, но не получилось :(

Янковиц 14.05.2016 20:56

Получилось следующее:
<div class="product-basket"></div>
<div class="product1">
<div class="price">100</div>
<a data-id="633" class="buy-now" onclick="return cart.add(this)" onmousedown="add(this)">Купить</a>
</div>
<div class="product2">
<div class="price">200</div>
<a data-id="632" class="buy-now" onclick="return cart.add(this)" onmousedown="add(this)">Купить</a>
</div>
<script>
    function add(elem) {
        var res = document.getElementsByClassName('product-basket')[0],
            price = parseInt(document.getElementsByClassName('price')[0].innerHTML),
            sum = parseInt(res.innerHTML) | 0;
        res.innerHTML = sum + price;
          }
</script>

Так как без onclick="return cart.add(this)" я обойтись не могу, пришлось добавить еще одно событие onmousedown. Считает... Но сумму берет только из первого:(

laimas 15.05.2016 10:00

Цитата:

Сообщение от Янковиц
Так как без onclick="return cart.add(this)" я обойтись не могу

Вы занимаетесь хренью, и хотя бы показывали, чего сделано было и что не получилось. Где это?

Поместите на любую свою страницу имеющую прокрутку по вертикали в самый ее низ вот такое:

<a>GO</a>

Первое - это уже не ссылка, и курсор у тега А будет "по умолчанию", и второе - щелкните по этой "ссылке". Все правильно, даже не дергается. Все правильно, нет у этой "ссылки" действия по умолчанию, а значит и вашим "ссылкам" return cart.add(this) и функции return false; как мертвому припарка.

Показывайте то что пытались сделать, и три вопроса:

1) есть ли у блоков <div class="product1"> ... </div> и т.д. общий ближайший родитель, но не body?

2) на чем базируется корзина на сервере - сессия, база или иное?

3) какова структура корзины и каков механизм добавления товаров в нее?

Янковиц 15.05.2016 15:47

Laimas, не ругайтесь пожалуйста. Вам php код нужен? Понимаете, работа корзины уже прекрасно работает. Все считает, передаёт данные покупок в бд, оформляет заказ. Мне лишь нужно простой скрипт для front-end, чтобы команда выполнялась на стороне клиента а не сервера. То есть, чтобы кликая на ссылку, скрипт мог вывести сумму в отдельном месте. Все, остальное не нужно.
У блоков div есть родительский блок, это блок div class="parent".

laimas 15.05.2016 16:51

А кто сказал что я ругаюсь? Я лишь говорю, что вы занимаетесь хрен знает чем?

Цитата:

Сообщение от Янковиц
Жаль, но не получилось

Что именно, где код попытки сделать? Вам что по каждому новому поводу что либо пояснять?

работа корзины уже прекрасно работает. Все считает, передаёт данные покупок в бд, оформляет заказ. - я уже говорил, что если сервер все считает, и добавление товара в корзину, это асинхронный запрос сервера, то считать на клиенте, это не есть необходимость, ибо нормальная корзина прежде чем добавить товар, проверит, есть ли такой в базе, и есть ли в наличии.

И уж коли ваша корзина "все считает", то сумму товаров в корзине ей раз плюнуть вернуть клиенту в ответ на запрос, а клиенту его показать, вот тут:

$.get('/cart?add=' + b.data('id'), function(data) {
            //в data ответ сервера - сумма товаров в корзине
            $('.product-basket').tetx(data)    
        });

Янковиц 15.05.2016 21:02

Цитата:

И уж коли ваша корзина "все считает", то сумму товаров в корзине ей раз плюнуть вернуть клиенту в ответ на запрос, а клиенту его показать
Да, это так, но разве это не создаст дополнительную нагрузку на сервер? А если клиент будет 10 раз добавлять новы товар. Опять взаимодействие с сервером? А если у меня 10 или 100 таких клиентов?

laimas 16.05.2016 13:01

Цитата:

Сообщение от Янковиц
Да, это так, но разве это не создаст дополнительную нагрузку на сервер?

А вы что ракетами торгуете, причем они собираются непосредственно перед покупкой и нужна калькуляция всех комплектующих от винтика до боеголовки, и все это на сервере считается на ручных счетах? :)

Если структура вашей корзины построена грамотно, то количество товаров в корзине это array_sum(array_column($basket, 'count')), а сумма все товаров в ней array_sum(array_map('array_product', $basket)). Чего тут считать то?

Цитата:

Сообщение от Янковиц
А если клиент будет 10 раз добавлять новы товар. Опять взаимодействие с сервером? А если у меня 10 или 100 таких клиентов?

А если не взаимодействовать то как? Я вас ведь не заставляю, это ваша идея Ajax-запросы, но асинхронный запрос на конкретную задачу, которую серверу решить это пустяки, в отличии от GET запроса с добавлением товара и перегрузкой всей страницы, это уже работа.

Корзину то ведь у вас на сервере, добавление товара это ведь все равно запрос сервера, и к чему тогда "философия о нагрузке" неуместная?

Янковиц 16.05.2016 15:00

Ладно. Спасибо за помошь. По правде говоря для меня array_sum и т.д. и т.п., что мертвому припарка:)

laimas 16.05.2016 15:19

JS вы не знаете, РНР тоже, чего же вы пытаетесь написать?

Я вам показывал код как получить цену товара, источником которой является сама ссылка. От вас нужно было только сложить ее с суммой в корзине. Я за вас не буду этого писать, ибо я не знаю когда она должна считаться - сразу или все таки по ответу сервера как по условию. Но вы сами, видимо, и этого не знаете. И чего вы ждете?

Если не читать о функциях, то конечно и не будет знаний по ним. А сложного в них ничего нет - читайте, это необходимо знать коли хотите что-то написать.


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