Button Increment or Decrement for quantity - JS

Question

I am trying to increase and decrease the quantity but when i click on the + or -, the input number doesn't change but still remains the default value 1.

$('.panel').append(
    '<td><div class="sp-quantity">' +
    '<div class="container" style=" font-size:14px; "> ' +
    '<div class="sp-minus fff"> <a class="ddd" href="#">-</a>' +
    '</div>' +
    '<div class="sp-input">' +
    '<input type="text" class="quantity-input" value="1">' +
    '</div>' +
    '<div class="sp-plus fff"> <a class="ddd" href="#">+</a>' +
    '</div>' +
    '</div></td>'
);


$(".ddd").on("click", function() {
    alert('testing');

    var $button = $(this),
        $input = $button.closest('.sp-quantity').find("input.quantity-input");
    var oldValue = $input.val(),
        newVal;

    if ($.trim($button.text()) == "+") {

        newVal = parseFloat(oldValue) + 1;

    } else {

        // Don't allow decrementing below zero
        if (oldValue > 0) {
            newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }

    $input.val(newVal);

});

Your code is invalid. Also check how to bind events to dynamic elements. `$(document).on('click', '.ddd', function () {})` — Justinas, Dec 11 '17 at 12:53
Add argument ` $(".ddd").on("click", function (e) {` and do `e.preventDefault()` — Madhavan.V, Dec 11 '17 at 12:54
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Justinas, Dec 11 '17 at 12:55
You do not need the `$.trim()`. You control the value, it has no spaces, no need to call a function which does nothing — Martijn, Dec 11 '17 at 13:01

Ricardo Rodrigues · Answer 1 · 2017-12-11T13:04:16.710

your code works, at least I changed the panel to be hardcoded HTML and it works:

https://jsfiddle.net/3hxveuLu/

<td>
  <div class="sp-quantity">
    <div class="container" style=" font-size:14px; ">
      <div class="sp-minus fff"> <a class="ddd" href="#">-</a>
      </div>
      <div class="sp-input">
        <input type="text" class="quantity-input" value="1">
      </div>
      <div class="sp-plus fff"> <a class="ddd" href="#">+</a>
      </div>
    </div>
</td>

JS:

$(".ddd").on("click", function() {
  alert('testing');

  var $button = $(this),
    $input = $button.closest('.sp-quantity').find("input.quantity-input");
  var oldValue = $input.val(),
    newVal;

  if ($.trim($button.text()) == "+") {

    newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below zero
    if (oldValue > 0) {
      newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $input.val(newVal);
});

If you really want dynamically added elements, this also works:

HTML:

<div class="panel" />

JS:

$(function() {
  $('.panel').append(
    '<td><div class="sp-quantity">' +
    '<div class="container" style=" font-size:14px; "> ' +
    '<div class="sp-minus fff"> <a class="ddd" href="#">-</a>' +
    '</div>' +
    '<div class="sp-input">' +
    '<input type="text" class="quantity-input" value="1">' +
    '</div>' +
    '<div class="sp-plus fff"> <a class="ddd" href="#">+</a>' +
    '</div>' +
    '</div></td>'
  );
});

$(".panel").on("click", ".ddd", function() {
  alert('testing');

  var $button = $(this),
    $input = $button.closest('.sp-quantity').find("input.quantity-input");
  var oldValue = $input.val(),
    newVal;

  if ($.trim($button.text()) == "+") {

    newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below zero
    if (oldValue > 0) {
      newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $input.val(newVal);
});

https://jsfiddle.net/3hxveuLu/1/

The key is changing your binding from:

$(".ddd").on("click", function() {

to:

$(".panel").on("click", ".ddd", function() {

Reasoning: when you are binding, the element is not in the DOM yet, so you basically want to bind onto the container, and when an event bubbles up, if it matches the filter (".ddd") it'll be handled, if not, ignored. That's how/why this works and your code doesn't.

edkeveked · Accepted Answer · 2017-12-11T13:04:58.480

It is only a problem related to when your <script></script> is loaded. Your code works when the script is loaded after your DOM. Maybe you can consider this answer to see where to put script tag inside an html.

Also I added the class panel inside your html: <div class="panel"></div> .

$('.panel').append(
       '<td><div class="sp-quantity">'+
         '<div class="container" style=" font-size:14px; "> '+ 
        '<div class="sp-minus fff"> <a class="ddd" href="#">-</a>'+
        '</div>'+
        '<div class="sp-input">'+
        '<input type="text" class="quantity-input" value="1">'+
        '</div>'+
        '<div class="sp-plus fff"> <a class="ddd" href="#">+</a>'+
        '</div>'+
        '</div></td>'

         )
         
         $(".ddd").on("click", function () {
            alert('testing');

    var $button = $(this),
        $input = $button.closest('.sp-quantity').find("input.quantity-input");
    var oldValue = $input.val(),
        newVal;

    if ($.trim($button.text()) == "+") {

        newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 0) {
            newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }

    $input.val(newVal);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
        // I remove the script here
</script>

<div class="panel"></div>

score 0 · Answer 3 · edited Oct 01 '21 at 18:21

You can use this structure and jQuery for increment and decrement (+/-)

function increase() {
    var a = 1;
    var textBox = document.getElementById("text");
    textBox.value++;
}    

function decrease() {
    var textBox = document.getElementById("text");
    textBox.value--;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>            
                
        </script>
     
</head>
<body>
<button type="button" onclick="increase()">increase</button>
        <input type="text" id="text" value="0">
        <button type="button" onclick="decrease()">Decrease</button>
</body>
</html>

Button Increment or Decrement for quantity - JS

3 Answers3