javascript - Increase and decrease values for inputs using jquery

I need to increase and decrease the value of inputs when clicking the + and - buttons but it doesn't seem to work. I got the code from this post: How to increase the value of a quantity field with jQuery? When clicking on the add button, I inserted a console.log statement for debugging purposes and surprisingly, I get a value of 3 even though I clicked on a button with an id of add1. Would really appreciate it if you could point out to me the error, thanks!

HTML:

<body>
    <p>
        <img src=".png" id="minus1" width="20" height="20">
        <input id="qty1" type="text" value="1">
        <img id="add1" src=".png" width="20" height="20">
    </p>

    <p>
        <img src=".png" id="minus2" width="20" height="20">
        <input id="qty2" type="text" value="1">
        <img id="add2" src=".png" width="20" height="20">
    </p>
</body>

jQuery:

$(function () {
    var numButtons = 2;
    //console.log(typeof(numButtons));
    //console.log(numButtons);
    for (var i = 1; i <= numButtons; i++) {

        $("#add" + i).click(function () {
            console.log(i);
            var currentVal = parseInt($("#qty" + i).val());
            //console.log(currentVal);
            if (!isNaN(currentVal)) {
                $("#qty" + i).val(currentVal + 1);
            }
        });

        $("#minus" + i).click(function () {
            var currentVal = parseInt($("#qty" + i).val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $("#qty" + i).val(currentVal - 1);
            }
        });
    }
});

jsfiddle - /

HTML:

<body>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20">
        <input id="qty1" type="text" value="1">
        <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
    </p>

    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20">
        <input id="qty2" type="text" value="1">
        <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
    </p>
</body>

jQuery:

$(function () {
    var numButtons = 2;
    //console.log(typeof(numButtons));
    //console.log(numButtons);
    for (var i = 1; i <= numButtons; i++) {

        $("#add" + i).click(function () {
            console.log(i);
            var currentVal = parseInt($("#qty" + i).val());
            //console.log(currentVal);
            if (!isNaN(currentVal)) {
                $("#qty" + i).val(currentVal + 1);
            }
        });

        $("#minus" + i).click(function () {
            var currentVal = parseInt($("#qty" + i).val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $("#qty" + i).val(currentVal - 1);
            }
        });
    }
});

jsfiddle - http://jsfiddle.net/hMS6Y/

Share Improve this question edited May 23, 2017 at 12:34 CommunityBot 11 silver badge asked Oct 2, 2013 at 4:02 Faizal 2871 gold badge3 silver badges11 bronze badges

why are you iterating over numButtons? Why not just have event handlers? – Scary Wombat Commented Oct 2, 2013 at 4:06
Hmm, will take that into consideration. I have to generate multiple inputs with different ids, that's why I thought the for loop makes sense. Can it be fixed? – Faizal Commented Oct 2, 2013 at 4:13
Your variable i is in a global state and when the for loop terminates its value becomes 3 and the functions you pass to click event access the value of i when they are triggered on click event. So the value of i these functions will get will be 3. – Jay Bhatt Commented Oct 2, 2013 at 4:17

Add a comment |

6 Answers 6

Sorted by: Reset to default 12

Try this in a simple way using class,

HTML

<body>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus"/>
        <input id="qty1" type="text" value="1" class="qty"/>
            <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
    </p>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus"/>
        <input id="qty2" type="text" value="1" class="qty"/>
        <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
    </p>
</body>

SCRIPT

$(function () {
    $('.add').on('click',function(){
        var $qty=$(this).closest('p').find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal)) {
            $qty.val(currentVal + 1);
        }
    });
    $('.minus').on('click',function(){
        var $qty=$(this).closest('p').find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $qty.val(currentVal - 1);
        }
    });
});

Fiddle: http://jsfiddle.net/hMS6Y/2/

Alternatively, you can short your code like,

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('p').find('.qty'),
      currentVal = parseInt($qty.val()),
      isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.val(
      isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
  <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus" />
  <input id="qty1" type="text" value="1" class="qty" />
  <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" />
</p>
<p>
  <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus" />
  <input id="qty2" type="text" value="1" class="qty" />
  <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" />
</p>

The issue at hand is that the value of i is 3 by the time the loop ends. What you want to do is save the value of each iteration so that when the click event fires it will still hold the correct value (the value at the time of the event being wired up). One way to do this is with what are called closures. Closures basically close around the value and save the function call with the value used to be called later. One way to accomplish this is with a function factory.

function add(value){
    console.log(value);
    var currentVal = parseInt($("#qty" + value).val());    
    if (!isNaN(currentVal)) {
        $("#qty" + value).val(currentVal + 1);
    }
};

function addClosure(value){
    return function(){
        add(value);
    };
};

At this point all you need to do is change the click event as follows:

$("#add" + i).click(addClosure(i));

JSFiddle: http://jsfiddle.net/infiniteloops/y9huk/

MDN Closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

in for loop i value become 3

DEMO

$(function () {

    $("#add1").click(function () {
            add(1);
    });

    $("#minus1").click(function () {
        minus(1);
    });

$("#add2").click(function () {
            add(2);
    });

    $("#minus2").click(function () {
        minus(2);
    });
});

function add(i){
var currentVal = parseInt($("#qty" + i).val());

        if (!isNaN(currentVal)) {
            $("#qty" + i).val(currentVal + 1);
        }
}

function minus(i){
  var currentVal = parseInt($("#qty" + i).val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $("#qty" + i).val(currentVal - 1);
        }
}

Working code.

<body>
    <div id='placeholder'>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" act='min' id="1" width="20" height="20" />
        <input id="qty1" type="text" value="1">
        <img src="http://i.imgur.com/98cvZnj.png" act='add' id="1" width="20" height="20" />
    </p>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" act='min' id="2" width="20" height="20" />
        <input id="qty2" type="text" value="1">
        <img src="http://i.imgur.com/98cvZnj.png" act='add' id="2" width="20" height="20" />
    </p>
    </div>
</body>



$(function () {
        $('#placeholder img').each(function(){
            $(this).click(function(){

            $action = $(this).attr('act');        
            $id = $(this).attr('id');
            $val = parseInt($('#qty'+$id).val());

            if($action == 'add'){
                $val = $val + 1;
            } else {
                if($val > 0){
                    $val = $val - 1;    
                }
            }
            $('#qty'+$id).val($val);

            });

        });
    });

<div class="box-qty">
<a href="javascript:void(0);" class="quantity-minus">-</a>
<input type="text" name="p_quantity" id="qnt" class="quantity" value="1">
<a href="javascript:void(0);" class="quantity-plus">+</a>
</div>

<script>
$(".quantity-plus").click(function(){     
 $("#qnt").val(Number($("#qnt").val())+1);
});

$(".quantity-minus").click(function(){
 if($("#qnt").val()>1)
 $("#qnt").val(Number($("#qnt").val())-1);     
});
<script>

Your variable i is global in the case it will actually work for #add3, #minus3. Here in code you can try this thing-

$(function () {
    var numButtons = 2;
    //console.log(typeof(numButtons));
    //console.log(numButtons);
    for (var i = 1; i <= numButtons; i++) {
        var t = i; //Now t is local 
        $("#add" + t).click(function () {
            console.log(t);
            var currentVal = parseInt($("#qty" + t).val());
            //console.log(currentVal);
            if (!isNaN(currentVal)) {
                $("#qty" + t).val(currentVal + 1);
            }
        });

        $("#minus" + t).click(function () {
            var currentVal = parseInt($("#qty" + t).val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $("#qty" + t).val(currentVal - 1);
            }
        });
    }
});

Hope this will help.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Increase and decrease values for inputs using jquery - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)