innerHTML 在与加号/分钟按钮一起使用时不起作用

Question

在下面的代码中，当(var inputField(的值按+和-按钮递增和递减时，我希望控制台日志和innerHTML的值，但我的代码不起作用。有人能帮我解决这个问题吗？

const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
var inputField = document.getElementById('input');
minusButton.addEventListener('click', event => {
const currentValue = Number(inputField.value);
inputField.value = currentValue - 1;
});
plusButton.addEventListener('click', event => {
const currentValue = Number(inputField.value);
inputField.value = currentValue + 1;
});
function myFunction() {
document.getElementById("a").innerHTML = inputField.value;
console.log(inputField.value);
}

<button id="minus">−</button>
<input type="number" value="" id="input" onchange="myFunction()" />
<button id="plus">+</button>
<p id="a"></p>

Answer 1

通过代码设置输入元素的值时，它不会调用onchange函数。我不确定这是所有的浏览器还是只是一些浏览器，但似乎都是。如果要调用更改事件，请调用按钮单击函数中的函数myFunction。或者调用输入的change函数。

以下任一作品：

minusButton.addEventListener('click', event => {
const currentValue = Number(inputField.value);
inputField.value = currentValue - 1;
myFunction();
});

或

minusButton.addEventListener('click', event => {
const currentValue = Number(inputField.value);
inputField.value = currentValue - 1;
inputField.onchange();
});