Cannot read property 'querySelector' of null in WordPress widget

Question

I have this JS code in a widget which works fine on the page it the widget loads. But gives errors ("new.js?ver=0.0.1:92 Uncaught TypeError: Cannot read property 'querySelector' of null") on the page the widget it's not showing on here's jS code -

var
carousel = document.querySelector('.threedcarousel'),
figure = carousel.querySelector('figure'),
nav = carousel.querySelector('nav'),
numImages = figure.childElementCount,
theta =  2 * Math.PI / numImages,
currImage = 0
;

nav.addEventListener('click', onClick, true);

function onClick(e) {
 e.stopPropagation();

 var t = e.target;
 if (t.tagName.toUpperCase() != 'BUTTON')
 return;

if (t.classList.contains('next')) {
  currImage++;
}
else {
  currImage--;
}

figure.style.transform = `rotateY(${currImage * -theta}rad)`;
}

As I understand since the widget is not loading other pages hence the errors, But how I resolve the error ? tried but didn't work

if(typeof carousel == 'undefined') {
var carousel = document.querySelector('.threedcarousel')
}

Of course you mean `if( typeof carousel != 'undefined' ) { ...` right? — JakeParis, Aug 02 '17 at 19:40
@MaciejKwas thank you for the comment. I took a different route and solved the issue from this answer - https://stackoverflow.com/questions/9578348/best-way-to-execute-js-only-on-specific-page — Ashiquzzaman Kiron, Aug 04 '17 at 08:38

score 0 · Accepted Answer · answered Feb 08 '19 at 05:31

Posting Answer.

I was looking for ways to trigger event on specific page not all the pages. I ended up using -

While in your page1.php you have a $(document).ready(onPage1Load) and so on for other pages. This will make sure that unintended event handlers are not registered.

StackOverflow link

Cannot read property 'querySelector' of null in WordPress widget

1 Answers1