Writing JS in wordpress

Question

toggler.addEventListener('click', toggleMB);

devtools shows, that AddEventListener in line above is typeerror. It is normal for wordpress, and it couldn't support js, or it is depend from rules of enqueueing scripts?

This if full script file:

let toggler = document.querySelector('.menutoggle');
let mbMenu = document.querySelector('.sidemenu');
let mbMenuBack = document.querySelector('.sidelayout');
// let marker = document.querySelector('.ltbottommenu');

  function toggleMB(){
      console.log('hooh')
      mbMenu.classList.toggle('sidemenu__active');
        
        
      if (mbMenu.classList.contains('sidemenu__active')) {
          toggler.childNodes[0].src = "/assets/img/cross.svg"
          toggler.classList.add('menutoggle__active');
          mbMenuBack.classList.add('sidelayout__show');
      }
      else {
          toggler.classList.remove('menutoggle__active');
          mbMenuBack.classList.remove('sidelayout__show');
          toggler.childNodes[0].src = "/assets/img/menu.svg"
      }

  };

  toggler.addEventListener('click', toggleMB);

  mbMenuBack.addEventListener('click', toggleMB);

This is script from function.php file in wordpress:

wp_enqueue_script ( 'script-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', false);

`addEventListener('click', toggleMB());` wrong... You are calling the function and assigning what it returns to the event hander. — epascarello, Oct 26 '20 at 13:06
error in chrome: VM90 main.js:28 Uncaught TypeError: Cannot read property 'addEventListener' of null at VM90 main.js:28 (anonymous) @ VM90 main.js:28 — MikhailGrib, Oct 26 '20 at 13:37

score 1 · Answer 1 · answered Oct 26 '20 at 13:08

Try removing the () from mbMenuBack.addEventListener('click', toggleMB()); to become: mbMenuBack.addEventListener('click', toggleMB); 2nd parameter has to be a function not a result from one.

Better yet implement them as anonymous functions or use a newer technology.

Ref: https://www.w3schools.com/jsref/met_element_addeventlistener.asp

score 0 · Answer 2 · answered Oct 26 '20 at 13:10

0

toggler.addEventListener('click', toggleMB());

You are calling the function toggleMB here, when adding an event listener. You shouldn't do that. Instead, you should put

toggler.addEventListener('click', toggleMB);

This way you are binding a function to an event, so the event will call the function when invoked.

answered Oct 26 '20 at 13:10

retrohusky

36
3

I'm delete call function, but error still appear. – MikhailGrib Oct 26 '20 at 13:15

Writing JS in wordpress

2 Answers2