Escribí el código a continuación y estoy tratando de cambiar el color de fondo del campo de entrada en el momento en que escribo algo. Tengo 4 campos de entrada. Si hago clic en enviar por primera vez y cualquier campo está vacío, el color de este campo cambiará a rojo, pero necesito cambiar el color a verde en el momento en que llene este campo vacío.
const submitButton = document.getElementById("submit") const inputField = document.querySelectorAll(".input") let requiredField = document.querySelectorAll(".requiredField") inputField.forEach(function (item){ submitButton.addEventListener("click", function (){ if(item.value == '') { item.classList.add("red"); item.nextElementSibling.classList.add("red"); } else{ item.classList.add("green") item.nextElementSibling.classList.remove("green"); } }) })Prueba esto:
inputField.forEach(field => { field.addEventListener("input", () => { field.classList.add("green"); }); });Si desea que solo un campo sea verde a la vez:
inputField.forEach(field => { field.addEventListener("input", () => { inputField.forEach(input => { input.classList.remove("green"); }); field.classList.add("green"); }); });En realidad, no necesita JavaScript para esto. Agregue el atributo required en las entradas y luego diseñe según corresponda con css.
<input type="text" required> <input type="text" required> <input type="text" required> <input type="text" required> input:valid { background-color: green; } input:invalid:required { background-color: red; }intente esto para una solución rápida:
const submitButton = document.getElementById("submit") const inputField = document.querySelectorAll(".input") inputField.forEach(field => { field.addEventListener("input", () => { inputField.forEach(input => { input.classList.remove("green"); input.classList.remove("red"); }); if (field.value !== "") { field.classList.add("green"); } else { field.classList.add("red"); } }); });