Question 290062 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – addEventListener not working. Help me to correct an JS

why that is not working ?

var headerBanner= $(".header-banner");
var closeBtn = $('closeBtn');

closeBtn.addEventListener('click', function () {
  headerBanner.classList.add('IsClose');
}, false);


.closeBtn {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  overflow: hidden;
  opacity: 0.8; 
  float: right;
  cursor: pointer;

}

I want to make custom button to close.
in f12 can’t see "IsClose". Do I make any mistake in js ?

Tags:

2

Answers


  1. 0

    You need to use JQuery’s version of classList.addClass() and also change the eventListener to on:

    closeBtn.on('click', function () {
  // 'headerBanner' is a JQuery object:
  headerBanner.addClass('IsClose');
});

    You can also check to make sure the listener is working correctly by adding console.log('test') to your event listener:

    closeBtn.on('click', function () {
  // Test that the listener is working correctly:
  console.log('The event listener is working!');
  // 'headerBanner' is a JQuery object:
  headerBanner.addClass('IsClose');
});

    Also, you need to change your declaration of closeBtn:

    var headerBanner= $(".header-banner");
var closeBtn = $('.closeBtn'); // '.' selects a class, like in CSS
    Login or Signup to reply.
  2. 0

    headerBanner is not a single element, so you should give function all those elements.

    $(document).ready(function () {
  var headerBanner = $(".header-banner");
  var closeBtn = $('.closeBtn')[0];
  closeBtn.addEventListener('click', function () {
    console.log('clicked')
    for(let banner of headerBanner)
      banner.classList.add('IsClose');
  }, false);
});

      <p class="header-banner">Banner</p>
  <button class="closeBtn">close</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search