Update text on button using JavaScript

Question

Have such button on my page (for showing current total in shopping cart):

    <div class="col s2 offset-s4 valign" id="shoppingCart">
        <a class="waves-effect waves-teal btn-flat no-margin white-text right" th:inline="text"><i class="material-icons right">shopping_cart</i>[[@{${total}+' руб'}]]</a>
    </div>

Written function for updating total number on that button:

function updateShoppingCart(newTotal) {
    var $div = $("#shoppingCart");

    var $a = $("<a class='waves-effect waves-teal btn-flat no-margin white-text right'></a>");
    var $i = $("<i class='material-icons right'>shopping_cart</i>");
    var $string = formatDecimal(newTotal,',','.') + " руб";

    $a.append($i);
    $a.append($string);

    $div.children().remove();
    $div.append($a);
}

But it does not work. Please help find bug or what I'm doing wrong.

Can you debug your JS, does your script make it pass this function? — Mark
– Mark, Commented Oct 25, 2016 at 20:14

NoobishPro · Accepted Answer · 2016-10-25 20:32:40Z

1

It's a lot more efficient to set $div = $('#shoppingCart');; in the global scope and use that var instead. This way your JS won't search through your entire DOM every time the function is called.

Your stuff doesn't work because your vars are very odd. I believe what you want to achieve is this:

HTML

<a class="waves-effect waves-teal btn-flat no-margin white-text right" th:inline="text">
  <i class="material-icons right">shopping_cart</i>
  <span>[[@{${total}+' руб'}]]</span>
</a>

JS:

function updateShoppingCart(newTotal) {
    var $div = $("#shoppingCart");

    var $a = $("a", $div); //select the <a> within the shoppingcart div
    var $i = $("i", $div); //select the <i> within the shoppingcart div
    var $span = $("span", $div); //select the newly added span
    var newPrice = formatDecimal(newTotal,',','.') + " руб";

    $span.text(newPrice);
}

I kept the $a and $i in as examples, but I don't see a need for you to use them or completely replace them, since you only want to change the text. By using a span, you can target the price without replacing all the html.

On a sidenote, the $ is generally used to state a var is a jquery object. string is not a jquery object in this scenario, so the $ there is a bit odd.

On a sidenote, if you want to replace html within an element, you should try doing it like so:

function updateShoppingCart(newTotal) {
    var $div = $("#shoppingCart");

    var newPrice = formatDecimal(newTotal,',','.') + " руб";
    //Create the new HTML as a string, not as an element
    var newHtml= '<a href="#" class="somethingClass"><i>Shopping_cart</i>'+newPrice+'</a>';

    //empties div beforehand current html, no seperate removal needed.
    //Then places the html string within the element
    $div .html(newHtml); 
}

See working JSFiddle here

edited Oct 25, 2016 at 20:32

answered Oct 25, 2016 at 20:15

NoobishPro

2,5591 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zzheads Over a year ago

Thanks mate, can't check your advice right now, out of my comp now

zzheads Over a year ago

Thanks! Works fine

Collectives™ on Stack Overflow

Update text on button using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related