2

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

Anthony
  • 31
  • 4
  • 1
    `querySelectorAll('#input_Text')` doesn't make sense because IDs have to be unique. `querySelector('#input_Text')` will do the trick. Or if you have lots of elements, use a class: `querySelectorAll('.input_Text')`. – Andy Sep 18 '21 at 09:50
  • https://stackoverflow.com/questions/17341670/change-color-of-one-character-in-a-text-box-html-css – Andy Sep 18 '21 at 10:00
  • It's not possible to have multiple text colors in one `` tag. – NcXNaV Sep 18 '21 at 10:48
  • If its not possible. Can I use something like: element.addEventListener("input", function(event){console.log(event.target.value) but instead of console send it to some div above the input and there do whats in the picture I added into my question? Or its better to do it in React, Vue... – Anthony Sep 18 '21 at 11:54

3 Answers3

3

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">
Yosvel Quintero
  • 18,669
  • 5
  • 37
  • 46
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">
NcXNaV
  • 1,657
  • 4
  • 14
  • 23
2

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">
dave
  • 2,750
  • 1
  • 14
  • 22