How can I change color in javascript for each letter which has been written into an input if data attribute(HTML) === input text in javascript?

Question

can you tell me please how can I change color (green is right, red is wrong) for each letter which has been written(in right order) into an input column if data attribute === input text in Javascript?

I mean if data="word" input value ="word"

When I write w - letter color is green else letter color red.

wo -stay green else red;
wor - green else red;
word -green else red;

My code is here:

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"};
    }));

Thx a lot

Answer 1

You can use Document.querySelectorAll() to get all input elements 'input[data-verb]' and attach an input event to set style border if the element's value String.prototype.startsWith() the entered text:

 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">

Answer 2

1. I've changed your id to class assuming there will be multiple inputs.
2. Also, use String.prototype.startsWith to check if data-verb starts with current input value.
3. Use element.style.border to set the element border.

 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">

Answer 3

Assign the same class to each input that you want to check a word for, then loop through the contents of querySelectorAll , adding an event listener to each of them.

Then you can use includes to see if the contents of what's typed matches the form's data attribute:

 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">