CODEWITHSUNDEEP
javascriptjqueryhtml
Roberto Manfreda
Roberto Manfreda

Reputation: 2623

Clicking programmatically on the arrows of html inputs (type="number")

Supposing i have an input element, in my html code, of type number and two buttons:

function downFunction(id) {
  let inputField = document.getElementById(id);
  // How to increment the value?
  log("Log from downFunction", inputField)
}

function upFunction(id) {
  let inputField = document.getElementById(id);
  // How to decrement the value?
  log("Log from upFunction", inputField)
}

function log(message, element) {
  console.log(message);
  console.log(element);
  console.log("\n");
}
<input type="number" id="inputFieldId" min="1" max="10" value="10">

<input type="button" id="downButton" onclick="downFunction('inputFieldId')" value="-"/>
<input type="button" id="upButton" onclick="upFunction('inputFieldId')" value="+" />

Is possible to increment/decrement the value of inputFieldId using javascript, or eventually jQuery, respectively by clicking on upButton and downButton?

I don't mean getting the current value of the field and re-setting the new value after doing ++ or -- operations.
I mean by clicking directly on the arrows buttons.

To better understand, doing something of similar to this:

let inputField = document.getElementById(id);  
inputField[0].arrowUp.click();  
inputField[0].arrowDown.click();

Upvotes: 2

Views: 5044

Answers (4)

ultraGentle
ultraGentle

Reputation: 6329

While you can use inputElement.stepUp() to change the value, that by itself won't fire an input event on the element.

So, if your code has inputElement.addEventListener('input', () => { // do stuff}), it will not be triggered.

However, after .stepUp() in your code, you can add

let event = new Event('input', {
    bubbles: true,
    cancelable: true,
});

inputElement.dispatchEvent(event);

Then the input event will fire on the element, as though a user entered it.

Citation: ChatGPT-4 taught me that!

Upvotes: 1

shadow2020
shadow2020

Reputation: 1351

Get the up/down button coordinates.

$('#upButton').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;
​
    console.log(xPos, yPos);
});

Click at those coordinates.

var event = $.Event('click');
event.clientX = 12.796875;
event.clientY = 9;
$('.upButton').trigger(event);

Upvotes: 0

Neel Bhanushali
Neel Bhanushali

Reputation: 782

You can use stepUp and stepDown methods on input[type=number] HTMLElement

stepUp Documentation stepDown Documentation

function stepUp() {
  document.getElementById('input').stepUp();
}

function stepDown() {
  document.getElementById('input').stepDown();
}
<input id=input type=number min=1 max=10>
<button onclick="stepUp()">+</button>
<button onclick="stepDown()">-</button>

Upvotes: 11

Scott Marcus
Scott Marcus

Reputation: 65835

You won't be able to programmatically click the arrows of an input type="number", but you don't have to because that's not what you actually want to do. What you want to do is the same action that would have happened if the user had clicked those arrows. So, you can just initiate that code yourself. In this case, just adjust the value of the element.

Upvotes: 0

Related Questions