Событие клика не запускается с использованием getElementByTagName

Question

У меня есть навигационная ссылка, структура такая. У меня есть требование, в котором я должен получить элемент по внутреннему HTML вместо id.

<li>
   <a id="someID">Products</a>
</li>

Когда я использую document.getElementById() и прикрепляю к нему событие щелчка, событие щелчка запускается. Но теперь я хочу получить элемент по внутреннему HTML. Итак, я сделал это:

 var anchors = document.getElementsByTagName('a');

for(var i=0;i<anchors.length;i++){
console.log(anchors[i].innerHTML)
if(anchors[i].innerHTML == 'Products'){
console.log("coming here");
var menuButton = anchors[i].parentElement
console.log(menuButton)
break;

}

}
console.log(menuButton instanceof HTMLElement);
menuButton.addEventListener("click", function(){
    alert("hello");
  });

Но в этом событии щелчка не срабатывает?

Answer 1

Неправильный способ, которым вы пытаетесь получить элемент в <a>, условие явно игнорируется, если вы назначаете [object HTMLCollection] == 'Products'

var anchors = document.getElementById("someID").value;
        

или если вам нужно получить значение с помощью тега c ,

var anchors = document.getElementsByTagName('a')[0].innerHTML

Answer 2

Попробуйте это ..

if(<HTMLInputElement>anchors[i].innerHTML == 'Products'){
    console.log("coming here");
    var menuButton = anchors[i].parentElement
    console.log(menuButton)
    break;
    
    }