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