CODEWITHSUNDEEP
javascript
batgerel.e
batgerel.e

Reputation: 857

How to get element id as function parameter

I am studying as front end developer. I am new to javascript. And i got this problem when i execute a js from backend passing some elements id. It displays some error Cannot read property 'addEventListener' of null. My js:

function disableOtherCheckBoxGrpScrolls(elementsContainerId) {
   console.error("Elements id from backend: " + elementsContainerId);
   var container = document.getElementById(elementsContainerId);
   // I am checking here length of elements
   console.error("Elements length : " + container.length);
   // It displays Elements length : undefined
     container.addEventListener('mousewheel', function(e){
      if (!$(this).hasScrollBar()) return;
     // If container div has a scrollbar it will do nothing

        var event = e.originalEvent,
        d = event.wheelDelta || -event.detail;

        this.scrollTop += (d < 0 ? 1 : -1) * 30;
        e.preventDefault();  
    }, {passive: false});
}

Any solution of this ?

And my backend passing elements id

    if (!isMobile)
        JSUtil.execFn("disableOtherCheckBoxGrpScrolls", checkboxGrp.getElementsContainerId());

Upvotes: 1

Views: 860

Answers (3)

batgerel.e
batgerel.e

Reputation: 857

Guys i solved my problem :). But i don't understand well how this working. My solution is:

function disableOtherCheckBoxGrpScrolls(elementsContainerId) {
  console.error('containerId: ' + elementsContainerId);
  // First is element undefined or Not rendered to DOM my opinion
  (function() {
    if (typeof elementsContainerId === "undefined") {
        throw new Error("elementsContainerId parameter is undefined");
    }
    var container = document.getElementById(elementsContainerId);
    console.error("Elements ID : " + container.length);
    container.addEventListener('mousewheel', function(e) {
        if (!$(this).hasScrollBar()) return;
        // logger.debug('has scroll');

        var event = e.originalEvent,
            d = event.wheelDelta || -event.detail;

        this.scrollTop += (d < 0 ? 1 : -1) * 30;
        e.preventDefault();
     }, { passive: false });

  })();

}

And i thought maybe js worked before html elements not loaded thats i got null and undefined error. By the way thanks for all comments and answers :).

Upvotes: 1

Omar Muscatello
Omar Muscatello

Reputation: 1301

You should check that your elementsContainerId parameter isn't undefined or null. In some place, you are calling the disableOtherCheckBoxGrpScrolls without a parameter, with an undefined variable, with a variable which value is null.

You could check that elementsContainerId is not undefined or null just before your logic and throw an error if condition is true. In this way, you will instantly notice if your are passing a wrong parameter to your function. 

function disableOtherCheckBoxGrpScrolls(elementsContainerId) {
   if(typeof elementsContainerId === "undefined" || elementsContainerId === null) {
       throw new Error("elementsContainerId parameter is undefined or null");
   }
   // ...
}

Also, after the first validation, you could check if the element with the specified id exists (just to be shure that the mousewheel event is bound)

Upvotes: 0

chmtt
chmtt

Reputation: 475

Be sure to pass an function parameter while calling.

disableOtherCheckBoxGrpScrolls('yourIDElement');

Upvotes: 0

Related Questions