Калькулятор выбора и флажка продолжает давать NaN, если оба флажка не отмечены - PullRequest
Новая
       20

Калькулятор выбора и флажка продолжает давать NaN, если оба флажка не отмечены

0 голосов
/ 13 июня 2019

У меня есть калькулятор, который продолжает давать NaN, если оба выбора (выпадающие) не имеют выбранной опции.

Первоначально это работало нормально с одним полем выбора и двумя флажками, как можно увидеть здесь https://codepen.io/Chazlie/pen/NZqdXg

Затем я попытался сделать так, чтобы у него было два выпадающих списка, но я получил NaNесли оба раскрывающихся списка не имеют выбора - это можно увидеть здесь https://codepen.io/Chazlie/pen/ewNBPR

Примечание: я не уверен, имеет ли это значение, но это также основано на условной логике, как можно видеть здесь https://codepen.io/Chazlie/pen/JQdGWG

Мой сценарий: 

$(function(){


  $("select.calculate").on("change", calc);
  $("input[type=checkbox].calculate").on("click", calc);
  $("select.thisone").on("change", calc);

  function calc() {
   var basePrice = 0;
    newPrice = basePrice;

    $("select.calculate option:selected,  select.thisone option:selected, input[type=checkbox].calculate:checked").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });

    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
  }
});

Это мой HTML 

<label>How long do you want the cover?</label>
  <select  name="howlongcover" class="thisone" >
       <option>Pick one!</option>
      <option data-price="55" value="valuhowlongcover"  >24 Months a </option>
      <option value="valuhowlongcover" data-price="58" >36 Months</option>
 <option value="valuhowlongcover" data-price="71" >48 Months</option>
  <option  value="valuhowlongcover" data-price="119" >60 Months</option>

    </select>
 <label>How long do you want the cover 2?</label>
  <select class="calculate" name="howlongcover">


       <option>Pick one!</option>
      <option  value="valuhowlongcover" data-price="60" >24 Months b </option>
      <option value="valuhowlongcover"data-price="65" >36 Months</option>
 <option  value="valuhowlongcover" data-price="79" >48 Months</option>
  <option value="valuhowlongcover" data-price="139" >60 Months</option>

    </select>

<BR><BR>


 Please tick if any of the following apply<br>
  <label><input class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> It's classed as a 4x4</label><BR>
  <label><input class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> The engine is more than 2.5L</label><BR>
    <label><class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> It's a commercial use</label><BR>

      <BR>
     Price:  <span id="item-price">0</span>

Когда я добавил 

$("select.thisone").on("change", calc);

и 

$("select.calculate option:selected,  select.thisone option:selected, input[type=checkbox].calculate:checked").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });

и 

<select  name="howlongcover" class="thisone" >

Это когда я начал сталкиваться с проблемами с NaN и должен был выбрать оба выпадающих списка.(в форме никогда не будут выбраны оба выпадающих меню, потому что условная логика никогда не будет отображать оба)

Пожалуйста, посмотрите это перо https://codepen.io/Chazlie/pen/ewNBPR

РЕДАКТИРОВАТЬ: здесь полностью работающий кодовый ручка https://codepen.io/Chazlie/pen/ZdGLZm На этом работает только один выпадающий список "до 15 000 фунтов стерлингов", а затем выберите обложку в калькуляторе.Я показываю это по той причине, что вы можете увидеть, что я пытаюсь выполнить

Спасибо

1 Ответ

0 голосов
/ 13 июня 2019

Вы получаете NaN, потому что всякий раз, когда щелкает любой флажок ввода, вы запускаете функцию calc ().Функция calc () получает данные о выбранных опциях, а также данные о флажках и пытается извлечь из них int.Проблема в том, что выбранная вами опция по умолчанию - «Pick One!»который не имеет никакого установленного атрибута data-price;так что при прохождении вашего для каждого цикла ... 

$("select.calculate option:selected, input[type=checkbox].calculate:checked").each(function () {
    newPrice += parseInt($(this).data('price'), 10);
});

... когда "this" относится к выбранной опции "Pick One!", $ (this) .data ('price') будетв свою очередь, верните undefined, так как эта опция не имеет атрибута data-price.Поэтому, если вы оставите это и нажмете любую из них, функция calc () попытается проанализировать int из undefined, который вернет NaN, так как вы не можете проанализировать целые числа из чего-то неопределенного.

Вы можетеполностью удалите эту опцию, добавьте атрибут data-price = "0" в "Pick One!"или вы можете добавить условный оператор, чтобы убедиться, что выбранный параметр является числом: 

function calc() {
var basePrice = 0;
newPrice = basePrice;

    $("select.calculate option:selected,input[type=checkbox].calculate:checked").each(function () {
      if(typeof $(this).data('price') === "number"){
        newPrice += parseInt($(this).data('price'), 10);
      }
    });

    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);

}

...