Как использовать значение в опции выбора только один раз? - PullRequest
Новая
       20

Как использовать значение в опции выбора только один раз?

0 голосов
/ 11 июля 2019

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

<div id='custom-price'>1000</div>

<select id="capsize-price" onchange="changePri()" name="capsize-price">
 <option value='100'>100</option>
 <option value='700'>700</option>
</select>

  function changePri() {
   var customPrice = parseFloat(document.querySelector("#custom-price").textContent);
   var capsizePrice = document.querySelector("#capsize-price").value;

   var price = customPrice + capsizePrice;
   document.querySelector("#custom-price").textContent = price;
  }

У меня все в порядке, но потом я заметил, что цена продолжает расти. Например, если конечный пользователь сначала выбирает только вариант 1 (100), а затем выбирает только вариант 2 (700), он добавляет цену на оба варианта.

Я знаю, что это то, что он должен делать на основе моего кода, но я изо всех сил пытаюсь придумать логику о том, как просто добавить опцию 1, когда пользователь выбирает это, и затем добавить просто опцию 2, когда пользователь выбирает опцию 2 вместо того, что он делает прямо сейчас.

Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Не уверен, что это то, что вы ищете? 

function changePri() {
   var capsizePrice = parseInt(document.querySelector("#capsize-price").value);
   var price = basePrice + capsizePrice;
   document.querySelector("#custom-price").textContent = price;
}
  
const basePrice = 1000;  
document.querySelector("#custom-price").textContent = basePrice;
<div id='custom-price'></div>
<select id="capsize-price" onchange="changePri()" name="capsize-price">
 <option value='100'>100</option>
 <option value='700'>700</option>
</select>

По сути, ваша "базовая цена" помещается в константу JS и добавляет к ней выбор. Вероятно, вам следует использовать обработчик, а не вызывать функцию inline.

0 голосов
/ 11 июля 2019

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

<div id='original-price'>1000</div>
<div id='custom-price'></div>

<select id="capsize-price" onchange="changePri()" name="capsize-price">
 <option value='100'>100</option>
 <option value='700'>700</option>
</select>

  function changePri() {
   var originalPrice = parseFloat(document.querySelector("#original-price").textContent);
   var capsizePrice = document.querySelector("#capsize-price").value;

   var customPrice = originalPrice + capsizePrice;
   document.querySelector("#custom-price").textContent = customPrice;
  }
...