0

I cant change any style property border, color etc., why? I always get:

Uncaught TypeError: can't access property "color", icon.style is undefined

<!-- this element is created multipleTimes by loop -->
     
<li class="list-group-item">
                <span>
                  <input class="input_Text" data-verb="<%= data %>" type="text">
                  <i class="fas fa-check checkIcon" ></i>
                </span>
                
                </li>
    let check = document.querySelectorAll('.input_Text')

/* HERE */

var icon = document.querySelectorAll('.checkIcon');

check.forEach(element => element.addEventListener('input',(e)=>{
   var data = element.getAttribute('data-verb').toString();
   var value = e.target.value;
   
   
   if (value == ""){
    element.style.border = "1px solid blue";
    element.style.color = "black";
   }
   else if (data.startsWith(value)){
      element.style.border = "5px solid green";
      element.style.color = "green";
   }
   else{
      element.style.border = "5px solid red";
      element.style.color = "red";
   }


 <!-- HERE -->
       value == data?icon.style.color = "green" : null;
    
    
}));
Anthony
  • 31
  • 4

1 Answers1

1

This is due to icon querySelectorAll not being the Element itself (see below how to return the single element instead).

It returns a NodeList which is quite similar to an Array. To do what you want, you need to get the first node returned by this list. Some ways to do this:

// Deconstructing it as an array, I'm not sure if you can really do this with a NodeList, should be tested
var [icon] = document.querySelectorAll('.checkIcon');

// Get item x where x is the index (in your case, 0, the first element)
var icon = document.querySelectorAll('.checkIcon').item(0);

// This is valid syntax, same as .item()
var icon = document.querySelectorAll('.checkIcon')[0];

Getting the single element itself

Alternatively, as noted in this answer comments, you can directly pick the element using Document's .querySelector() API

References:

Lucas Coelho
  • 99
  • 6