Increment variable in a function ( jQuery)

Question

Probably a huge beginners question, but I'm having a really hard time solving it.

I'm making a list of inputs with buttons to increase or decrease the value of them. In order to make life infinitely easier for myself I decided to create a function containing all the logic and whatnots so that I wouldn't have to copy tons of code for every option, but instead just pass the option-name to the function and be happy, like so: optionMaker('the-name-of-the-ID').

The code works perfectly by itself, but when I functionize it nothing works. :(

I guess it has something to do with using variable++ or variable-- in a function, but I have no idea what to do about it. Posting the code below.

HTML

<div id="i-am-one-of-the-options" class="option">
    <p>Amount:</p>
    <input type="text" value="0">
    <p class="amount">0</p>
    <p class="amt-btn plus">+</p>
    <p class="amt-btn minus">-</p>
</div>

jQuery

function optionMaker(optionName) {

    var $theID = $('#' + optionName),
        $input = $theID.find('input'),
        $plus = $theID.find('.plus'),
        $minus = $theID.find('.minus'),
        $ammount = $theID.find('.amount');

    var amt = $input.val();

    $input.attr('name', optionName);

    $plus.click(function() {
        amt++;

        $input.attr('value', amt);
        $ammount.text(amt);
    });

    $plus.click(function() {

        if (amt > 0) {
            amt--;

            $input.attr('value', amt);
            $ammount.text(amt);
        }
    });

}

optionMaker('i-am-one-of-the-options');

Thanks for caring!

You have two plus event handlers and no minus one. Also, edit the question and try to describe exactly what's not working so other people can try to solve the issue. — krusty.ar, Mar 06 '15 at 00:02

score 1 · Accepted Answer · answered Mar 06 '15 at 00:01

In fact the error is trivial: you wrote $plus instead of $minus for the second click handler.

However for it to work perfectly you should prefer $input.val(value) instead of $input.attr('value', value), and make sure to update the amount count when the user edits the input. See full example below:

function optionMaker(optionName) {

    var $theID = $('#' + optionName),
        $input = $theID.find('input'),
        $plus = $theID.find('.plus'),
        $minus = $theID.find('.minus'),
        $ammount = $theID.find('.amount');
 

    $input.attr('name', optionName);
  
    $input.on('input', function() {
       $ammount.text($(this).val());
    });

    $plus.click(function() {
        var amt = $input.val();
        amt++;

        $input.val(amt);
        $ammount.text(amt);
    });

    $minus.click(function() {
        var amt = $input.val();

        if (amt > 0) {
            amt--;

            $input.val(amt);
            $ammount.text(amt);
        }
    });

}

optionMaker('i-am-one-of-the-options');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="i-am-one-of-the-options" class="option">
    <p>Amount:</p>
    <input type="text" value="0">
    <p class="amount">0</p>
    <p class="amt-btn plus">+</p>
    <p class="amt-btn minus">-</p>
</div>

@kobbe_cool what do you mean it is not updating? As you can see it works in my example (you can test it by clicking "Run cuse snippet") so maybe you didn't copy everything? — floribon, Mar 06 '15 at 17:51
Oh! It was a typo. Sorry for being so sloppy. Why is it better to use `.val()` instead of `.attr()`? — mr.tamagotchi, Mar 12 '15 at 19:16
I recommend you read http://stackoverflow.com/questions/8312820/jquery-val-vs-attrvalue. In your example, if you replace `val` by `attr` you will see that the behavior is incorrect (you can only increment/decrement the value once). If the answer helped you please accept it, thanks :-) — floribon, Mar 12 '15 at 20:52

Increment variable in a function ( jQuery)

1 Answers1