Цикл while (Javascript) подвешивает страницу, в чем проблема?

Question

[Armando]

Помогите пожалуйста у меня уже мозг взорвался искать решение.

Исходные данные: Имеем продукт за $100 (цена выводится из базы данных по средствам php) и имеем несколько опций (HTML- Radio input на несколько вариантов) +$10, +$15, +$20.
При выборе одного из radio вариантов к 100 прибавляется допустим 10, но обновляется данная инфа уже только в корзине.
Задача: Сделать динамическое обновление цены после выбора одного из radio переключателей, то есть выбрали вариант +10 и цена сразу стала 110.
Решение:

1. Подвязываюсь к radio инпуту по средствам события onclick и пишу скрипт
   
2. Обращаюсь к html классу "цены" и сохраняю его значение в переменную
   
3. Вытягиваю значение выбранного radio варианта в отдельную переменную
   
4. Складываю численные значения обеих переменных и записываю в отдельную переменную
   
5. Обращаюсь к html классу "цены" и записываю туда новое значение из переменной
   

Но на деле оказалось, что первый прогон даёт верное значение допустим 100+10=110, однако при повторном клике значение становится 120, то есть уже считается как 110+10=120, что и логично, ведь я не обнулял значение переменной и она так и осталась 110.
Для исправления ситуации я принял решение использовать цикл while и break, что бы была возможность после первого прогона обнулить значение переменной и на повторное нажатие использовать исходное значение, но данный цикл тупо подвешивает всю страницу.

Собственное сам код:

<input price="<?php echo $option_value['price']; ?>" 
                    type="radio" 
                    name="option[<?php echo $option['product_option_id']; ?>]" 
                    value="<?php echo $option_value['product_option_value_id']; ?>"
                    onclick=
                    "
//сохраняем значение исходной цены
                        price1 = $('.spec-price').text();
                        real_price = price1.substring(2);
//сохраняем значение исходной цены

//сохраняем значение выбранного radio                                                       
                        price_select = $(this).attr('price');
                        price_select_new = price_select.substring(2);                    
//сохраняем значение выбранного radio  

//проводим сложение                       
                          new_price = +real_price + +price_select_new;
//проводим сложение  

//сохраняю значение цены  в отдельную переменную
                          real = real_price;
//сохраняю значение цены  в отдельную переменную

//цикл: пока новая цена не равна старой цене, то записываем значение новой цены вместо старой, а когда новая цена становится раной старой цене (которая после первого прогона реально становится равна новой), то прерываем цикл
и обнуляем значение новой цены
                          while(new_price != real ){
                            document.getElementById('span.price-now').innerHTML = '$ ' + new_price;
                            if(new_price==real) break; 
                            new_price=0;
}                                             
                        alert(new_price);
                   "                
                    />

Собственно, где косяк?

Comments

[Сергей Соколов]

Где разметка с несколькими input'ами?

Сделайте отдкльный фиддл, в котором вы разберетесь с разметкой и скриптом. А затем подключите параметры из PHP. Задачу лучше разбивать на составляющие и решать их по отдельности.

[RAX7]

while (new_price != real) {
  document.getElementById('span.price-now').innerHTML = '$ ' + new_price;
  if (new_price == real) break;
  new_price = 0;
}

new_price не изменяется, а только обнуляется, real тоже не меняется. Этот цикл брякнется только когда real === 0

[Armando]

Сергей Соколов, а что нам из php мешает, мы же получаем чистый html код после загрузки страницы и уже работаем с ним по средствам js. Весь вопрос том, как на повторное нажатие отталкиваться от начальной цены.

[Armando]

RAX7, спасибо, а как можно с этим бороться?

[RAX7]

arman1231, вам ниже Сергей Соколов хороший ответ дал.

Answer 1

[Сергей Соколов]

Не надо циклов. У вас есть источник «правды» – исходная цена. Один раз её получите в переменную (а лучше константу). Далее у input'ов слушайте событие не клик, а "change". Один обработчик события на все элементы радио. Получил событие - обновил цену из константной исходной цены и кликнутого элемента.

Comments

[Armando]

Далее у input'ов слушайте событие не клик, а "input".

Спасибо за ваш ответ, но не совсем понятно как можно слушать инпут, нам ведь событие нужно как клик по радио.

Если цикл не нужен, тогда получается:
После первого прогона, у нас в переменной, которую вы преложили сделать константой остается новое значение.
Можно ли как то на повторное нажатие сбросить это значение, чтобы произвести верный подсчет?

Я не прошу писать решение, но могли бы чуть более детально дать ответ, как для тугодума)

[Сергей Соколов]

arman1231, не по клику, а по окончании загрузки страницы выполняйте js, который один раз проинициализирует константу исходной цены.
По событиям выбора радиокнопок обновляйте цену исходя из константы и кликнутого элемента.

[Михаил]

Сергей Соколов, вот тут почитайте про события https://learn.javascript.ru/events-change

В вашем случае нужно событие change

[Сергей Соколов]

Михаил, согласен, change тут более уместен, чем input.

[Armando]

Сергей Соколов, обошелся введением новой нулевой переменной, которая принимает значение опции после первого прогона, а затем вычитается из суммы, ниже код, может кому поможет

<input price="<?php echo $option_value['price']; ?>" 
                    type="radio" 
                    name="option[<?php echo $option['product_option_id']; ?>]" 
                    value="<?php echo $option_value['product_option_value_id']; ?>"
                    onclick="
  //----- меняем цену товара в зависимости от цены выбранной опции ------

       

       if (typeof(price_select_old) == 'undefined') {
         price_select_old=0; //если переменная не объявлена, объявим её, переменная нужна для фиксации цены выбранной опции, что-бы было можно откатиться назад при выборе другой опции
       }                                            

       //узнаем текущую цену     
       price_current_now=$('#price-now').text();
       price_current_now=price_current_now.substring(2);  
       //конец узнаем текущую цену

       //узнаем цену выбранной опции
       price_select=$(this).attr('price');
       price_select=price_select.substring(2); 
       //конец узнаем цену выбранной опции

       //меняем цену на товар
       sum = +price_current_now + +price_select - +price_select_old;
       document.getElementById('price-now').innerHTML = '$ ' + sum;

       price_select_old=parseInt(price_select); // фиксируем стоимость выбранной опции, т.к. при след. выборе опции ее нужно отнять, что-бы вернуть прежнюю цену товара
       alert(sum);
       //конец меняем цену на товар

   //------- конец меняем цену товара в зависимости от выбранной опции ----------
       "    />

Спасибо за подсказку.