Considere una forma mínima como la siguiente:
let button = document.querySelector("button"); let firstNameInput = document.querySelector("#firstName"); firstNameInput.style.borderColor = "red"; button.addEventListener('click', () => { firstNameInput.value = "Goofy"; }); firstNameInput.addEventListener('input', () => { firstNameInput.style.borderColor = "black"; }) .form__input { border: none; outline: none; border-bottom: 1px solid black; } <form> <label for="firstName">Firstname:</label> <input type="text" class="form__input" id="firstName"> <button type="button">Button</button> </form>Al cargar esta página, debería ver un campo de entrada con un borde inferior rojo y junto a él un botón. Si hace clic en el botón, el nombre "Goofy" se escribe dentro del campo de entrada. Sin embargo, el borde inferior permanece rojo. Me gustaría que cambie su color cada vez que se escribe algo dentro del campo de entrada. Ahora, cuando continúo y cambio el nombre manualmente, el color del borde cambia su color a negro, tal como quiero. Pero, ¿alguien puede explicarme por qué el color del borde no cambió al hacer clic en el botón?
El evento de entrada es un UI-Event , está destinado a activarse cuando el usuario realiza una acción en la página, no cuando lo hacen los scripts.
Para su caso, su secuencia de comandos puede simplemente llamar a la misma devolución de llamada cuando establece el .value .
let button = document.querySelector("button"); let firstNameInput = document.querySelector("#firstName"); const setBorderColor = () => { firstNameInput.style.borderColor = "black"; }; firstNameInput.style.borderColor = "red"; button.addEventListener('click', () => { firstNameInput.value = "Goofy"; setBorderColor(); }); firstNameInput.addEventListener('input', setBorderColor) .form__input { border: none; outline: none; border-bottom: 1px solid black; } <form> <label for="firstName">Firstname:</label> <input type="text" class="form__input" id="firstName"> <button type="button">Button</button> </form>