Re-run javascript code when the value changes

Question

I have two files: a html file (with the code below) and a javascript file (it creates a value for the <span id="quantity">) The code works fine, but the word only changes if I refresh the whole page.

I want the word to change from 'articles' to 'article' or vice versa as soon as the 'quantity' changes. Is this possible? And if so, how?

<span id="quantity" class="simpleCart_quantity"></span>
<span id="quantityText"></span>

<script type="text/javascript">

        $(window).load(function() 
        {
        var quantity = document.getElementById("quantity"),
            quantityText = document.getElementById("quantityText");
        if (parseInt(quantity.innerHTML, 10) === 1) {
            quantityText.innerHTML = "article";
       } else {
            quantityText.innerHTML = "articles";
        }
        });

</script>

How are the contents of quantity being changed? Find the JS that is updating the contents of that span and add a trigger there to run the code that is currently in your window load function. — ElGavilan
– ElGavilan, Commented Nov 4, 2013 at 15:00

Community · Accepted Answer · 2017-05-23 12:18:07Z

2

You might want to look into MVVC framework like Knockout JS. For example, you would set the contents of the #quantity <span></span> element to be an observable.

However, try reading this SO thread to find a solution similar to what you probably are hoping for. In summary, change events only occur from the browser on the blurring of form fields, so you'll need to implement a $("#quantity").trigger('change')

Once you have a trigger set-up after the DOM element has been loaded, you can do the following:

$('#myParentNode').on('change','#mynum', function() {
    // Add your logic in here
    $('#quantityText').text('articles')  .... .. .. ..... 
});

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 4, 2013 at 15:13

jtromans

4,2936 gold badges38 silver badges34 bronze badges

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

1 Comment

wjhguitarman Over a year ago

I would definitely recommend using knockout for this

Slavo · Accepted Answer · 2013-11-04 15:16:53Z

Normally, the span element doesn't fire a change event, so you cannot subscribe to it, like you would normally do in an input element.

However, you can trigger such an event using jQuery in the same code, which changes the value of the span (I assume there is such code, because normally spans don't change value).

Here is an example which simulates this change every 10 seconds, and triggers the change event. It also includes a handler for that change event, which duplicates the value in the other span.

<span id="quantity" class="simpleCart_quantity">1</span>
<span id="quantityText"></span>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    var quantity = $("#quantity"),
        quantityText = $("#quantityText");

    setInterval(function() {
        var currentVal = parseInt(quantity.html());
        if (currentVal >= 10) {
            quantity.html(1);
        }
        else {
            quantity.html(currentVal + 1);
        }
        quantity.trigger('change');
    }, 10000);

    quantity.on('change', function(sender, args) {
        quantityText.html($(this).html());
    });
});

</script>

Collectives™ on Stack Overflow

Re-run javascript code when the value changes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related