CODEWITHSUNDEEP
javascript
Anthony
Anthony

Reputation: 31

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?

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

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

Upvotes: 2

Views: 645

Answers (3)

NcXNaV
NcXNaV

Reputation: 1761

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

Upvotes: 2

Yosvel Quintero
Yosvel Quintero

Reputation: 19080

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

Upvotes: 3

dave
dave

Reputation: 2901

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

Upvotes: 2

Related Questions