Get value of number input when it is updated, with stepUp or stepDown

Question

I am using the following snippet to update the value of my number input field:

<div class="number-input">
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepDown()"
                  style="border-right: 0.1px solid #555555"
                ></button>
                <input
                  class="quantity tank"
                  min="0"
                  name="soldier"
                  value="0"
                  type="number"
                  max="10"
                />
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepUp()"
                  style="border-left: 0.1px solid #555555"
                  class="plus"
                ></button>
          </div>

However, when I use stepUp and stepDown with a number input, its value does not get updated in the DOM :

The Problem

I want to get the value of this input field everytime it is updated (an alert or just log it to the console) but am not able to start doing so because of this, is there a workaround to this or some way I can still access the value of the input field on update?

$(".soldier").bind("keyup", function () {
  console.log($(".soldier").val());
});

This was one of the solutions I found but it only works when the user focuses and presses a key inside the input field, whereas I am updating the field with two other buttons.

It looks to work fine here - click the button on the right, and the input increments — CertainPerformance, Sep 05 '20 at 17:06
@CertainPerformance I wanted to know how I can access the value using js/jquery as the jquery keyup and on update functions dont seem to work — ssomename, Sep 05 '20 at 17:10

score 1 · Accepted Answer · answered Sep 05 '20 at 17:14

DOM attributes generally don't automatically change when the DOM changes (though there are a few exceptions). The value attribute is not an exception - when the value in an input changes, the DOM markup for the element does not change. But this doesn't prevent you from being able to retrieve the value - simply select the input and examine its .value property (don't use getAttribute):

document.querySelector('div + button').addEventListener('click', () => {
  console.log(document.querySelector('input').value);
});

<div class="number-input">
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepDown()"
                  style="border-right: 0.1px solid #555555"
                ></button>
                <input
                  class="quantity tank"
                  min="0"
                  name="soldier"
                  value="0"
                  type="number"
                  max="10"
                />
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepUp()"
                  style="border-left: 0.1px solid #555555"
                  class="plus"
                ></button>
</div>
<button>Log current value</button>

If you want to check the new value right after an update, then add a change listener:

const input = document.querySelector('input');
const logNewValue = () => {
  console.log(document.querySelector('input').value);
};
document.querySelector('div + button').addEventListener('click', logNewValue);
input.addEventListener('change', logNewValue);

<div class="number-input">
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepDown(); logNewValue()"
                  style="border-right: 0.1px solid #555555"
                ></button>
                <input
                  class="quantity tank"
                  min="0"
                  name="soldier"
                  value="0"
                  type="number"
                  max="10"
                />
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepUp(); logNewValue()"
                  style="border-left: 0.1px solid #555555"
                  class="plus"
                ></button>
</div>
<button>Log current value</button>

Also, if at all possible, best to avoid inline handlers, they have way too many problems to be worth using nowadays, such as a demented scope chain and quote escaping issues. Attach event listeners properly using Javascript with addEventListener instead.

Get value of number input when it is updated, with stepUp or stepDown

1 Answers1