JQuery dynamically change number

Question

Internet shop. Cart. Products in the cart:

name | price | count | pricecount  
Car  | 10usd |   2   |   20usd

count is <input type='number' class='changecount'>, if I change it I want to take the inputed number, then multiply by price and change text value of pricecount. But I want to do it with effect like so:

price = 10; count = 2; pricecount = 20; ->> change count to 3 so pricecount = 30;
pricecount changes from 20 to 30 with effect showing 21,22,23..30 (like timer)

Changes the text but without effect

$('.changecount').blur(function(){
    var $price = $(this).parent().siblings('.gprice').text();
    var $value = $(this).val();
    var $pricecount = $price * $value;
    $(this).parent().siblings('.gpricecount').text($pricecount);
});

How can I do it with JQuery ?

Why are you addressing variable as `$price`? That's a PHP thing. — Flater, Feb 21 '13 at 16:31
@Flater Putting a $ in front of variables in javascript has become somewhat common to denote that variable is a jQuery object. The op's use here isn't exactly on the mark. — Jack, Feb 21 '13 at 16:33
@Flater ~ largely irrelevant. While his naming convention makes me irk (I use $ to denote jQuery objects), it's valid syntax. Leave it alone. :p — Richard Neil Ilagan, Feb 21 '13 at 16:33
no. you can name javascript variables with $. I usually do it to name jquery objects — letiagoalves, Feb 21 '13 at 16:33
I'm not saying it's impossible, I didn't know why people do it :) what's the benefit of denoting a jQuery variable? — Flater, Feb 21 '13 at 16:35
@Flater There's not "benfit" performance wise. It can be useful to know what your variable contains. Much like you might name a variable that you know should always be a string like `strMyString`. — Jack, Feb 21 '13 at 16:36
@Flater ~ well, personally, it makes it easier for me to know that a variable is a jQuery object (as opposed to, say, a raw HTML element, or a primitive value) so that I know I can call this or that function on it. If you work with jQuery, you work with jQuery objects all the time alongside other value types more likely, so it kind of helps. To each his own though. :p — Richard Neil Ilagan, Feb 21 '13 at 16:37
I`m using Jquery for a week maybe and always used $ as in php and it worked, didnt try w/o it, thought it wasnt a mistake. — mozg, Feb 21 '13 at 16:38

score 1 · Answer 1 · answered Feb 21 '13 at 16:41

You can create a function that changes the number periodically:

function IncreaseTotalPrice( item, lowVal, highVal) {
    //item is the DOM element that displays the price

    while(lowVal < highVal) {
        lowVal++;
        item.text(lowVal);
        sleep(100); //wait 0.1 sec before continuing the loop and changing the number again
    }
}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Note: I like to use that sleep() function. setTimeout() and setInterval() work just as well.

score 1 · Answer 2 · answered Feb 21 '13 at 16:43

One way you can do it is by leveraging setInterval to perform a regular scheduled +1 operation on your text.

Something like this to go from one number to 30, by making it tick by 1 every second:

var interval = 1000,      // one second
    max = 30,
    textbox = $('#textbox'),
    schedule = setInterval(function () {

        var currentValue = textbox.val();

        // if we've already reached the max limit,
        // break schedule
        if (currentValue >= max) { 
            clearInterval(schedule);
        }

        // add 1
        textbox.val(currentValue + 1);                        

    }, interval);

The code's very dirty, but you should be able to get a good idea on what I mean. One good thing about setInterval is that it is non-blocking, so your other processes should be able to continue while this is going on.

letiagoalves · Accepted Answer · 2013-02-21T17:09:17.387

1

See this DEMO and tell me if it solves your problem. Change the price on the left and see the effect on the right input

var timer = null;
$("#price1").change(function(){
    if(!updating) updatePrice();
  });
});

    var updating = false;
    function updatePrice() {
      console.log("tick");
      var $price1 = $("#price1");
      var $price2 = $("#price2");
      var dif = +$price1.val() - +$price2.val();

      if(dif < 0) {
        $price2.val(+$price2.val()-1);
      }else if(dif > 0) {
        $price2.val(+$price2.val()+1);
      }

      if(dif !== 0){
        updating = true;
        setTimeout(updatePrice, 1000);
      }else {
        updating = false; 
      }

    }

Updated: leak fixed

edited Feb 21 '13 at 17:09

answered Feb 21 '13 at 16:44

letiagoalves

11,224
4
40
66

This'll leak, because there's no way of stopping the `setInterval` call. :( – Richard Neil Ilagan Feb 21 '13 at 16:46
can you please make it for multiple items ? – mozg Feb 21 '13 at 18:16
@mozg what do you mean? Please be more specific so I can help you – letiagoalves Feb 21 '13 at 20:00

score 0 · Answer 4 · answered Feb 21 '13 at 16:34

0

Jquery.blur is not what you think. It does not make blur effect but removes the control's focus. Fade-in fade-out might be an option for you.

answered Feb 21 '13 at 16:34

Emre Senturk

345
5
13

No, I don't think he's interested in fading animations either. – Richard Neil Ilagan Feb 21 '13 at 16:35
I use blur to check input change and fire function if it is. Dont need to fade. changecount is an input class. – mozg Feb 21 '13 at 16:40

score 0 · Answer 5 · answered Feb 21 '13 at 16:49

0

Try JQuery FlipCounter plug-ins like:

http://www.jqueryrain.com/?LCnNoMur

http://keith-wood.name/flightBoard.html

answered Feb 21 '13 at 16:49

Mayur Manani

795
4
12

JQuery dynamically change number

5 Answers5