How to get element id as function parameter

Question

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());

It means that you have passed an `id`, that no element in your html contains. — Vignesh Raja, Jan 29 '18 at 07:21
Show us how you are calling this method. Create a working snippet using `<>`. — gurvinder372, Jan 29 '18 at 07:22
@VigneshRaja Exactly. Use console.log to log elementsContainerId. — Jaakko Uusitalo, Jan 29 '18 at 07:23
@KhShuren-Erdene, add this line console.log(elementsContainerId); below "function disableOtherCheckBoxGrpScrolls(elementsContainerId) {" — Jaakko Uusitalo, Jan 29 '18 at 07:23
when i type and execute `console.log(elementsContainerId);`. Its displays `undefined`. — batgerel.e, Jan 29 '18 at 07:24
Where are you getting the IDs from? Show the code that calls this function. — Barmar, Jan 29 '18 at 07:35

score 1 · Accepted Answer · answered Jan 29 '18 at 08:04

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 :).

score 0 · Answer 2 · answered Jan 29 '18 at 07:27

0

Be sure to pass an function parameter while calling.

disableOtherCheckBoxGrpScrolls('yourIDElement');

answered Jan 29 '18 at 07:27

chmtt

437
4
10

i have multiple elements – batgerel.e Jan 29 '18 at 07:29
In this case you should use classes instead of unique id's. Also take a look at each functions if you are using jquery otherwise, this is going to help you :) https://stackoverflow.com/questions/12117018/how-to-turn-jquery-each-into-regular-javascript-loop – chmtt Jan 29 '18 at 07:32
Hold on i will try it :) – batgerel.e Jan 29 '18 at 07:35

Omar Muscatello · Answer 3 · 2018-01-29T07:43:06.633

0

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)

edited Jan 29 '18 at 07:43

answered Jan 29 '18 at 07:35

Omar Muscatello

1,256
14
25

i tried this. and i got `elementsContainerId parameter is undefined` this error message. So this means i passing wrong values or something gone wrong ? – batgerel.e Jan 29 '18 at 07:39
Yes, wrong parameter value. You should check the calling method and, maybe, put a `console.log` of your parameter right before the call to `disableOtherCheckBoxGrpScrolls`. – Omar Muscatello Jan 29 '18 at 07:41
And i print my variable container `console.error("Elements Id: " + container)`. It gives me `VM39881:1237 Elements ID : [object HTMLDivElement]` – batgerel.e Jan 29 '18 at 07:42
@KhShuren-Erdene please show the code that call `disableOtherCheckBoxGrpScrolls` function so we can help you. – Omar Muscatello Jan 29 '18 at 07:45
Sorry @KhShuren-Erdene but you should post the code of any uknown function like `JSUtil.execFn` and `getElementsContainerId`. – Omar Muscatello Jan 29 '18 at 07:57
thanks for answer. And sorry for running your time :) – batgerel.e Jan 29 '18 at 08:07

How to get element id as function parameter

3 Answers3