0
337
Vistas¿Cómo puedo cambiar el color en javascript para cada letra que se ha escrito en una entrada si el atributo de datos (HTML) === texto de entrada en javascript?
¿Puede decirme cómo puedo cambiar el color (el verde es correcto, el rojo es incorrecto) para cada letra que se ha escrito (en el orden correcto) en una columna de entrada si el atributo de datos === texto de entrada en Javascript?
Me refiero a si datos = "palabra" valor de entrada = "palabra" 
Cuando escribo w, el color de la letra es verde, de lo contrario, el color de la letra es rojo.
wo -stay green else red; wor - green else red; word -green else red;Mi código está aquí:
let all = document.querySelectorAll('#input_Text') all.forEach(element => element.addEventListener('input',(e)=>{ if(e.target.value === element.getAttribute('data-verb')){ element.style.border = "5px solid green" }else{element.style.border = "5px solid red"}; }));Muchas gracias
3 Respuestas
Responde la pregunta0
Puede usar Document.querySelectorAll() para obtener todos los elementos 'input[data-verb]' y adjuntar un evento de input para establecer el borde de estilo si el valor del elemento String.prototype.startsWith() es el texto ingresado:
document .querySelectorAll('input[data-verb]') .forEach(el => el.addEventListener('input', ({ target: { value }}) => { const color = el.getAttribute('data-verb').startsWith(value) ? 'green' : 'red' el.style.border = `5px solid ${color}` })) <input type="text" data-verb="word">0
- Cambié su
idaclassasumiendo que habrá múltiples entradas. - Además, use
String.prototype.startsWithpara verificar sidata-verbcomienza con el valor de entrada actual. - Use
element.style.borderpara establecer el borde del elemento.
let all = document.querySelectorAll('.input_Text') all.forEach(element => element.addEventListener('input',(e)=>{ var data = element.getAttribute('data-verb').toString(); var value = e.target.value; if (e.target.value == ""){ element.style.border = "none"; } else if (data.startsWith(value)){ element.style.border = "5px solid green"; } else{ element.style.border = "5px solid red"; } })); <input type='text' class='input_Text' data-verb="word">0
Asigne la misma clase a cada entrada para la que desea verificar una palabra, luego recorra los contenidos de querySelectorAll , agregando un detector de eventos a cada uno de ellos.
Luego puede usar includes para ver si el contenido de lo que se escribe coincide con el atributo de datos del formulario:
let words = document.querySelectorAll('.word'); words.forEach((word) => { word.addEventListener('input', () => { if (word.dataset.verb.includes(word.value)) { word.style.border = '5px solid green'; } else { word.style.border = '5px solid red'; } }); }); <input type="text" data-verb="apple" class="word"><br /> <input type="text" data-verb="banana" class="word">