Find the value of an input with an addEventListener after the value is changed by a select box-CodePudding

I am trying to use an eventListener to check input in an input box (type="number"):

aE.addEventListener("input", (e) => {
  console.log(aE.value);
}

But what I really need the eventListener to pick up is any change in value on the input box. This particular input box has a select where users can choose one of a few numerical options for constants. But the current method of eventListener does not pick up changes in value from that select.

What is the correct syntax to get the value of the input box whenever it changes?

CodePudding user response：

I'm not sure if input listener do exactly you want

Try using change | keypress | keydown | keyup

CodePudding user response：

You can use change event to get the value.

selectEl.addEventListener("change", (e) => {
  console.log(e.target.value);
});

Try this example on codepen

CodePudding user response：

Assuming aE has been defined by some earlier code to resolve from a querySelector.

You would want to listen to a change event since it is coming from a select input. Also, you need to add target to get the internal value and return the event, not the element.

const aE = document.getElementById('idOfAe');
 
aE.addEventListener("change", (e) => {
  console.log(e.target.value)
});

CodePudding user response：

Looks like my only way around was testing the actual select button as well as the input. So I have multiple eventListeners.

The new one is set up for the <select> attribute.

selectA.addEventListener("change", (e) => {
console.log(aE.value);
}

The original aE listener remains as well. So it's two listeners to do the same job in a sort-of-way.