Javascript 单击第二个li时触发警报

我试图在单击导航栏中元素homenav下的第二个li时显示警报。您可以在上签出完整的代码

HTML

<div id="homenav">
<div class="navbar navbar-default  navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav"></ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Table Ranking</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
            </ul>
    </div>
  </div>
</div>
</div>

获取要定位的元素的

ID

如果要使用

选择器

，请尝试：

const linkButton=document.querySelector（'homenav li:nth child（2）a'）；
如果（链接按钮）{
linkButton.addEventListener（'click'，function（）{
警报（“测试”）；
});
}

<div id="homenav">
<div class="navbar navbar-default  navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav"></ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Table Ranking</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
            </ul>
    </div>
  </div>
</div>
</div>