Adding a number with a plus button

Question

I want to make a button that will ad a number to existing field. My code:

HTML:

JAVASCRIPT:

$(document).ready(function() {
    $('.str .stat-plus img').click(function() {
        var val = $('.str-img div').val();
        var new_val = parseInt($('.str-img div').val(),10) + 1 ;
        $('.str-img div').val(new_val);
    });
});

user_11977929 · Answer

The val method is primarily used to get the values of form elements such as input, select and textarea.

Instead of val method, you can use text or html method on $('.str-img div') element, like this:

$(document).ready(
    function() {
        $('.str .stat-plus img').click(function() {
            var val = $('.str-img div').html();
            var new_val = parseInt(val,10) + 1 ;
            $('.str-img div').html(new_val);
        });
    }
);

user_6214210 · Answer

Use .text() to the get the div's text instead of .val() which is use to get the value of an element. Try this. I've completed the function with both increment and decrement capabilities.

$(document).ready(function() {
    $('.stat-plus, .stat-minus', '.str').click(function() {
        var $display = $('.str-img div');
        var new_val = parseInt($display.text()) + ($(this).is('.stat-plus') ? 1 : -1);
        $display.text(new_val);
    });
});

Adding a number with a plus button

2 Answers