Change Function return NaN Value

434
November 23, 2016, at 6:04 PM

I have the following structure in my page:

Fieldset:

Size

Options

That shows Was, Now and You Save Price

Then I have JQuery in place that convert the above into float and shows the Save Price in percentage. It all works as intended until I change for instance the Size and the Options. To overcome this I've tried to use .change(function(). However when I change the value from the selected menu and it returns NaN. Can you please help?

Here is my JS Code:

$(".product-options").change(function() { 
 
 
      var oldPrice = parseFloat(jQuery('.old-price-item .price .price').text().replace('£', ''), 10); 
      var savePrice = parseFloat(jQuery('.special-price .price .price').text().replace('£', ''), 10); 
      var youSave = savePrice / (oldPrice / 100); 
      var n = parseFloat(youSave).toFixed(2); 
 
      $('div.ratio-div').html('<p>' + n + ' % OFF</p>'); 
 
      $('div.save-price-div').html('<p>£' + savePrice + ' OFF</p>'); 
 
 
    }).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="options-container-big"> 
  <fieldset class="product-options" id="product-options-wrapper"> 
    <dl class="attribute-list"> 
      <dt id="attribute122_row" style="position: relative;"><label class= 
            "required product-options__label" for= 
            "attribute122">Size</label></dt> 
      <dd> 
        <div class="input-select input-select--alternate"> 
          <select class="validate-select super-attribute-select validation-passed" data-attribute="item-size" data-choosetxt="Size" data-role="none" id="attribute122" name="super_attribute[122]"> 
            <option value=""> 
              Size 
            </option> 
            <option value="235"> 
              Single 
            </option> 
            <option value="238"> 
              Double 
            </option> 
            <option value="239"> 
              King 
            </option> 
          </select> 
        </div><span class="item-size-warning" id="attribute122-warning" style="display:none;"></span> 
      </dd> 
      <dt id="attribute129_row" style="position: relative;"><label class= 
            "required product-options__label" for= 
            "attribute129">Storage</label></dt> 
      <dd class="last"> 
        <div class="input-select input-select--alternate"> 
          <select class="validate-select super-attribute-select" data-attribute="storage" data-choosetxt="Storage" data-role="none" id="attribute129" name="super_attribute[129]"> 
            <option value=""> 
              Storage 
            </option> 
            <option value="310"> 
              No Drawers 
            </option> 
            <option value="312"> 
              2 Drawers 
            </option> 
            <option value="313"> 
              4 Drawers 
            </option> 
          </select> 
        </div> 
      </dd> 
    </dl> 
  </fieldset> 
  <div class="product-options-bottom"> 
    <div class="add-to-cart"> 
      <div class="price-box"> 
        <div class="old-price"> 
          <ul id="old-price-15511"> 
            <li class="old-price-item"> 
              <div class="line-through"> 
                &nbsp; 
              </div><span class="price-label">Was</span> 
              <span class="price"><span class= 
                            "currency">£</span></span> 
            </li> 
            <li class="old-price-item"> 
              <div class="line-through"> 
                &nbsp; 
              </div><span class="price-label">Was</span> 
              <span class="price"><span class= 
                            "currency">£</span></span> 
            </li> 
          </ul> 
        </div> 
        <p class="special-price"><span class="price-label">You 
                Save</span>  <span class="currency-special-price">£</span> 
          <span class="price" id="price-excluding-tax-15511"></span> 
        </p><span class="regular-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer"></span> 
        <meta content="GBP"> 
      </div> 
      <div class="product-stock-status"> 
        <div class="product-stock-status__wrapper"> 
          <span class="title">In Stock</span> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Please note The fieldset provide different price for Size only or Size + different option.

Answer 1

Based on the HTML provided, it looks like you have incorrectly doubled up the class selector called "price" in the jQuery selectors.

Try these instead:

var oldPrice = parseFloat(jQuery('.old-price-item .price .currency').last().text().replace('£', ''), 10);
var savePrice = parseFloat(jQuery('.special-price .price').text().replace('£', ''), 10);

It is difficult to know for certain because the html is missing the numbers. I guess you either edited the price out, or it is generated dynamically by some other script not shown.

Here is a cut down version of the html to illustrate what your selectors are choosing:

http://jsbin.com/heduju/5/edit?html,js,console,output

Update

Just noticed that there are multiple matches to the first selector so I added .last() to the selector as well (assuming that the last was price is used for the calculation).

http://jsbin.com/jegeqe/17/edit?html,js,console,output

Answer 2

jQuery('.old-price-item .price .price').text() returns "" (empty string), so parseFloat() is NaN.

Rent Charter Buses Company
READ ALSO
Change Source URL of Charts in C3.js

Change Source URL of Charts in C3.js

I have a webpage which shows charts using C3. js.

434
Mimic the Input type range of a website

Mimic the Input type range of a website

I'm trying to reproduced exactly the following page:http://mailchimp. com/pricing/.

372
Two jquery plugins to the same textarea

Two jquery plugins to the same textarea

I have a text area. I am using texteditor plugin to convert the text area to a text editor.

363
iCheck checkboxes not showing in angularjs

iCheck checkboxes not showing in angularjs

I have iCheck styled checkboxes integrated to my angularjs. I've included the following code in directive.

516