Updating Variable While Typing In Text Input Field

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', () => {
document.querySelector('.acc-textinput').blur();
document.querySelector('.acc-textinput').focus();
});

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.

Thanks!

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', () => {
textField.blur();
textField.focus();
console.log("Worked for me");
});
});