以编程方式单击 html 输入的箭头（type="number"）

Question

假设我的 html 代码中有一个输入元素，类型为 number 和两个按钮：

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="+" />

是否可以inputFieldId分别通过单击upButton和来增加/减少使用 javascript 或最终使用 jQuery的值downButton？

我的意思不是在执行++或--操作后获取字段的当前值并重新设置新值。
我的意思是直接点击箭头按钮。

为了更好地理解，做一些类似的事情：

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

Answer 1

您可以在HTMLElement上使用stepUp和stepDown方法input[type=number]

stepUp 文档 stepDown 文档

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>