CODEWITHSUNDEEP
javascriptjqueryhtml
John
John

Reputation: 619

jQuery doesn't amend html as intended

I am trying to amend a price through JQuery. When I add thecode to the console all seems to be ok, but the html doesn't change. Also when I call the console.log(newPrc) it says "newPrc" not defined. My code is:

(function($) {
  Number.prototype.formatMoney = function(c, d, t) {
    var n = this,
      c = isNaN(c = Math.abs(c)) ? 2 : c,
      d = d == undefined ? "." : d,
      t = t == undefined ? "," : t,
      s = n < 0 ? "-" : "",
      i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
      j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
  };

  $(document).ready(function() {

    oldPrc = jQuery('body.checkout-delivery .basket__totals #grand-total-price .price').html();
    newPrc = oldPrc.replace('<span class="currency">£</span>', '');
    newPrc = newPrc.split(',');
    newPrc = newPrc[0] + newPrc[1];
    newPrc = parseInt(newPrc) + 39;
    newPrc = '<span class="currency mtI">£</span>' + newPrc;
    jQuery('body.checkout-delivery .basket__totals #grand-total-price .price:has(.currency:not(.mtI))').html(newPrc);
  });


})(jQuery);

Upvotes: 0

Views: 43

Answers (1)

damo-s
damo-s

Reputation: 1008

Once I've added jQuery and the appropriate demo markup to the snippet it appears to add 39 (well not really as 39 plus 4.99 is not 43) to the original price as you intended and display the result in the HTML:

(function($) {
  Number.prototype.formatMoney = function(c, d, t) {
    var n = this,
      c = isNaN(c = Math.abs(c)) ? 2 : c,
      d = d == undefined ? "." : d,
      t = t == undefined ? "," : t,
      s = n < 0 ? "-" : "",
      i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
      j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
  };

  $(document).ready(function() {

    oldPrc = jQuery('body.checkout-delivery .basket__totals #grand-total-price .price').html();
    newPrc = oldPrc.replace('<span class="currency">£</span>', '');
    newPrc = newPrc.split(',');
    newPrc = newPrc[0] + newPrc[1];
    newPrc = parseInt(newPrc) + 39;
    newPrc = '<span class="currency mtI">£</span>' + newPrc;
    jQuery('body.checkout-delivery .basket__totals #grand-total-price .price:has(.currency:not(.mtI))').html(newPrc);
  });


})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="checkout-delivery">
  <div class="basket__totals">
    <div id="grand-total-price">
      <div class="price"><span class="currency">£</span>4.99</div>
    </div>
  </div>
</body>

Does your markup look like the markup above?

Upvotes: 1

Related Questions