Increase and Decrease Number With JavaScript and Two Buttons Up and Down

Add/decrease value on click

For the record (honoring your initial question): here's a 'vanilla' solution.

{  document.addEventListener("click", addOrSubtract);    function addOrSubtract(evt) {    const from = evt.target;        if (from.dataset.addvalue) {      const numberInput = document.querySelector("input");      const newValue = +numberInput.value + +from.dataset.addvalue;      numberInput.value = newValue >= +numberInput.min         && newValue <= +numberInput.max ? newValue : numberInput.value;    }  }}

<input type="number" min="0" max="4000" value="0" readonly><button data-addvalue="200">increment</button> (max 4000)<button data-addvalue="-200">decrement</button> (min 0)

Keyboard up and down arrows used to increase decrease value

Try this:

var $input = $('p');$(document).on('keydown', function(event) {    if (event.which == 38 || event.which == 104) {        $input.text((parseInt($input.text()) + 1));    } else if (event.which == 40 || event.which == 98) {        $input.text((parseInt($input.text()) - 1));    }});

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

How to individually increase or decrease a value using jquery

DEMO

 $(document).ready(function () {
     $(".quantity-adder .add-action").click(function () {
         if ($(this).hasClass('add-up')) {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')


             text.val(parseInt(text.val()) + 1);
         } else {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             if (parseInt(text.val()) > 1) {


                text.val(parseInt(text.val()) - 1);
             }
         }
     });

 });

I added the .parent() so that then find the proper text to increase

How to make buttons that increment and decrement a value when clicked?

The document.write is the problem. It only works before the browser is done loading the page completely. After that, document.write doesn't work. It just deletes all of the existing page contents.

Your first document.write is executed before you the page has loaded completely. This is why you should see the 0 next to the two buttons.

Then however, the page has loaded. Clicking on a button causes the event handler to be executed, so document.write will be called, which doesn't work at that point, because the page already has loaded completely.

document.write shouldn't be used anymore. There are many modern ways of updating the DOM. In this case, it would create a <span> element and update it's content using textContent.

Moreover, use addEventListener instead of inline event listeners:

var x = 0;var span = document.querySelector('span'); // find the <span> element in the DOMvar increment = document.getElementById('increment'); // find the element with the ID 'increment'var decrement = document.getElementById('decrement'); // find the element with the ID 'decrement'
increment.addEventListener('click', function () {  // this function is executed whenever the user clicks the increment button  span.textContent = x++;});
decrement.addEventListener('click', function () {  // this function is executed whenever the user clicks the decrement button  span.textContent = x--;});

<button id="increment">increment</button><button id="decrement">decrement</button><span>0</span>

Increase or decrease numbers of an array so the sum of them always remains 100

You could check if there is a value for decrementing and add all changes to the sum for incrementing a value.

const
    change = (array, index, direction) => {
        if (direction === 1) {
            const step = 1 / array.length;
            for (let i = 0; i < array.length; i++) {
                if (i === index || array[i] === 0) continue;
                const s = Math.min(step, array[i]);
                array[i] -= s;
                array[index] += s;
            }
        } else {
            const step = Math.min(1 / array.length, array[index] / (array.length - 1));
            for (let i = 0; i < array.length; i++) {
                if (i === index) continue;
                array[i] += step;
                array[index] -= step;
            }
        }
        return array;
    },
    values = [96.8, 0.2, 1, 1, 1],
    display = values => values.forEach((v, i) => document.getElementById('value' + i).innerHTML = v.toFixed(2)),
    addEvent = (type, index) => event => {
        change(values, index, type === 'up' ? 1 : -1);
        display(values);
    };
    

[...document.getElementsByTagName('button')].forEach(element => {
    const [type, index] = element.id.match(/\d+|\D+/g);
    element.addEventListener('click', addEvent(type, +index));
});

display(values);

.as-console-wrapper { max-height: 100% !important; top: 0; }
td { text-align: center; width: 20%; }

<table>
    <tr>
        <td><button id="up0">^</button></td>
        <td><button id="up1">^</button></td>
        <td><button id="up2">^</button></td>
        <td><button id="up3">^</button></td>
        <td><button id="up4">^</button></td>
    </tr>
    <tr>
        <td id="value0"></td>
        <td id="value1"></td>
        <td id="value2"></td>
        <td id="value3"></td>
        <td id="value4"></td>
    </tr>
    <tr>
        <td><button id="down0">v</button></td>
        <td><button id="down1">v</button></td>
        <td><button id="down2">v</button></td>
        <td><button id="down3">v</button></td>
        <td><button id="down4">v</button></td>
    </tr>
</table>

How increase or decrease in quantity using JQUERY

I have changed a Class of minus button and please try this.

$(document).ready(function() {   $('.pls.altera').click(function() {       var curr_quantity = $(this).prev().val();       curr_quantity = parseInt(curr_quantity)+1;       $(this).prev().val(curr_quantity);       alert('Product Name : '+$(this).parent().parent().parent().prev().text());   });   $('.pls.minus').click(function() {       var curr_quantity = $(this).next().val();       if(curr_quantity != 0) {           curr_quantity = parseInt(curr_quantity)-1;           $(this).next().val(curr_quantity);           alert('Product Name : '+$(this).parent().parent().parent().prev().text());       }   });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="table table-xs">  <tbody>    <tr>      <th>Product Name</th>      <th class="text-right center">Quantity</th>    </tr>    <tr class="item-row">      <td>        <p>Sandisk</p>      </td>      <td class="text-right center" title="Quantity">        <center>          <div class="input-group quantity-div">            <button type="button" class="pls minus"> - </button>             <input type="text" name="quantity" value="1" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;"> <button type="button" class="pls altera"> + </button>          </div>        </center>      </td>    </tr>    <tr class="item-row">      <td>        <p>TRANBO </p>      </td>      <td class="text-right center" title="Quantity">        <center>          <div class="input-group quantity-div">            <button type="button" class="pls minus"> - </button>             <input type="text" name="quantity" value="4" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;"> <button type="button" class="pls altera"> + </button>          </div>        </center>      </td>    </tr>  </tbody></table>