0
327
ViewsHow can I change color in javascript for each letter which has been written into an input if data attribute(HTML) === input text in javascript?
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
3 answers
Answer question0
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">0
- I've changed your
idtoclassassuming there will be multiple inputs. - Also, use
String.prototype.startsWithto check ifdata-verbstarts with current input value. - Use
element.style.borderto 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">0
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">