Updating Variable While Typing In Text Input Field

Jan 28, 2022

Somebody once shared this JS as a solution, which works well for a single text field on the screen. But it only seems to focus on the first text field if there are multiple. Is there a way to have all text fields update their variables while typing in them?

document.querySelector('.acc-textinput').addEventListener('keyup', () => {

I'm trying to make it so that a button isn't available unless the text fields have been filled out. As a matter of intuitive UI, it doesn't make sense to have the learner have to click out of the text field first for the button to become available.


1 Reply
Nedim Ramic

Hi Curtis,

For more text fields, you should probably use "querySelectorAll" along with "forEach" method. 
For example:

const textFields = document.querySelectorAll('.acc-textinput');

textFields.forEach((textField) => {
textField.addEventListener('keyup', () => {
console.log("Worked for me");