CODEWITHSUNDEEP
javascripthtmlbootstrap-4dom-events
Hemanshu Dharmik
Hemanshu Dharmik

Reputation: 29

On button click I want to increment the value of text field by one using Javascript

I want each button to increment the value text field next to it

<input type="number" value="0" min="0" max="5" step="1" id="qty"/>
<button onclick="buttonClick()" type="button" class="btn btn-success btn-sm" id="add">ADD</button>

Javascript:

var i = 0;
function buttonClick() {
    document.getElementById('qty').value = ++i;
}

I'm using this code but it is adding value to first text field only after pressing any of the button on page.

Attached output of design

Upvotes: 0

Views: 2329

Answers (4)

drGrove
drGrove

Reputation: 176

Based on the design you've provided, it seems like you want to be able to use this on multiple "items".

With that in mind you will not be able to use ids. To get around that you can do something like this instead while taking advantage of some dom based javascript manipulation.

    <div class="item">
      <input type="number" value="0" min="0" max="5" step="1"/>
      <button onclick="buttonClick(this)" type="button" class="btn btn-success btn-sm">ADD</button>
    </div>

As far as the javascript is concerned since the button is after the text input field you can use element.previousElementSibling

function buttonClick(element) {
  let qtyBox = element.previousElementSibling;
  qtyBox.value = parseInt(qtyBox.value) + 1;
}

Upvotes: 0

Rahul Yadav
Rahul Yadav

Reputation: 1

Hello @Hemanshu Dharmik;

You should probably do something like this:

 var i = 0; function buttonClick() { 
     document.getElementById('add').value = i++; } </script>

I hope this gets your counter done work properly.

Upvotes: 0

Hisham Bawa
Hisham Bawa

Reputation: 438

Since you said the button is only adding value to the first text field, you can give different IDs to each text field with its own onclick function so they can be used separately

Here's an example with your code

var i = 0;
var x = 0;
var y = 0;

function buttonClick1() {
    document.getElementById('qty1').value = ++i;
}

function buttonClick2() {
    document.getElementById('qty2').value = ++x;
}

function buttonClick3() {
    document.getElementById('qty3').value = ++y;
}
<input type="number" value="0" min="0" max="5" step="1" id="qty1" />
<button onclick="buttonClick1()" type="button" class="btn btn-success btn-sm" id="add">ADD</button>

<input type="number" value="0" min="0" max="5" step="1" id="qty2" />
<button onclick="buttonClick2()" type="button" class="btn btn-success btn-sm" id="add">ADD</button>


<input type="number" value="0" min="0" max="5" step="1" id="qty3" />
<button onclick="buttonClick3()" type="button" class="btn btn-success btn-sm" id="add">ADD</button>

.

Upvotes: 0

Abdi T. Bedaso
Abdi T. Bedaso

Reputation: 104

function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}
<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onclick="incrementValue()" value="Increment Value" />
</form>

Here you go: Implementation Example: Html

<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onclick="incrementValue()" value="Increment Value" />
</form>

Javascript:

function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

Upvotes: 2

Related Questions