CODEWITHSUNDEEP
javascriptjquery
Ujjawal Bhandari
Ujjawal Bhandari

Reputation: 1372

Trigger alert on clicking of second li

I am trying to show alert upon clicking of second li in navigation bar under element homenav. You can checkout the complete code on codepen

var linkButton = document.getElementById('#homenav li:nth-child(2) a');
if(linkButton) {
  linkButton.addEventListener('click', function() {
    alert('Test');
  });
}

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>

Upvotes: 1

Views: 41

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28414

Document#getElementById takes the ID of the element to locate.

If you want to use a selector, try Document#querySelector:

const linkButton = document.querySelector('#homenav li:nth-child(2) a');

if(linkButton) {
  linkButton.addEventListener('click', function() {
    alert('Test');
  });
}
<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>

Upvotes: 1

Related Questions