CODEWITHSUNDEEP
jqueryfunction
mr.tamagotchi
mr.tamagotchi

Reputation: 133

Increment variable in a function ( jQuery)

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!

Upvotes: 2

Views: 439

Answers (1)

floribon
floribon

Reputation: 19193

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>

Upvotes: 1

Related Questions