如何根据另一个文本更改图标

Question

Basically, I want my webpage to show a specific icon (using fontawesome) if the title includes a specific word, right now, it works if I include just that one word in the title, but if I include more words, then it doesn't recognize it.

I am fairly new to Js, at first, it didn't work at all, but then I separated the two classes "fas" and "fa-eye" and now they work properly if you add each separately.

var icon = document.getElementsByClassName("postTitleIcon");
var text = document.getElementsByClassName("postTitle");
for(var i = 0; i < icon.length; i++) {
    if(text[i].textContent == "eye") {
        icon[i].classList.add("far");
        icon[i].classList.add("fa-eye");
    }
}

I expect the icon to show if the word "eye" is in the HTML, no matter what comes before or after it.

Answer 1

Alright, everyone, I think I found the answer, you simply need to add includes after textContent .

here's the code now, I tried a couple of times and it seems like it works like I wanted to:

var icon = document.getElementsByClassName("postTitleIcon");
var text = document.getElementsByClassName("postTitle");
for(var i = 0; i < icon.length; i++) {
    if(text[i].textContent.includes("eye")) {
        icon[i].classList.add("far");
        icon[i].classList.add("fa-eye");
    }
}

Thanks to Sebastian for pointing it out.