How can I prevent js function from starting if search after getElementById is not found?

Question

I have a script that adds top scroll on a horizontal div. The script should add it to 10 different divs. (From mainplh_boAutoOddsTable1_divScrollContainer to mainplh_boAutoOddsTable10_divScrollContainer)

To do this, I call the script 10 times (below are the first 3 examples). However, if one of the divs is missing, it breaks the script.

doublescroll(document.getElementById('mainplh_boAutoOddsTable1_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable2_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable3_divScrollContainer')); 

If, for example, it is not possible to find mainplh_boAutoOddsTable1_divScrollContainer, this will break my Javascript. How can i solve this? For example, to forbid function start if it cannot find this div element?

Error message:

 Uncaught TypeError: Cannot read property 'scrollWidth' of null 

This is the full javascript:

 function doublescroll(element) { var scrollbar= document.createElement('div'); scrollbar.appendChild(document.createElement('div')); scrollbar.style.overflow= 'auto'; scrollbar.style.overflowY= 'hidden'; scrollbar.style.width= '506px'; scrollbar.firstChild.style.width= element.scrollWidth+'px'; scrollbar.firstChild.style.paddingTop= '1px'; scrollbar.firstChild.appendChild(document.createTextNode('\xA0')); scrollbar.onscroll= function() { element.scrollLeft= scrollbar.scrollLeft; }; element.onscroll= function() { scrollbar.scrollLeft= element.scrollLeft; }; element.parentNode.insertBefore(scrollbar, element); } doublescroll(document.getElementById('mainplh_boAutoOddsTable1_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable2_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable3_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable4_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable5_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable6_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable7_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable8_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable9_divScrollContainer')); doublescroll(document.getElementById('mainplh_boAutoOddsTable10_divScrollContainer')); 

Answer 1

Make your code a little more robust:

 function doublescroll(element_id) { var element = document.getElementById(element_id); if (!element) return; var scrollbar= document.createElement('div'); scrollbar.appendChild(document.createElement('div')); scrollbar.style.overflow= 'auto'; scrollbar.style.overflowY= 'hidden'; scrollbar.style.width= '506px'; scrollbar.firstChild.style.width= element.scrollWidth+'px'; scrollbar.firstChild.style.paddingTop= '1px'; scrollbar.firstChild.appendChild(document.createTextNode('\xA0')); scrollbar.onscroll= function() { element.scrollLeft= scrollbar.scrollLeft; }; element.onscroll= function() { scrollbar.scrollLeft= element.scrollLeft; }; element.parentNode.insertBefore(scrollbar, element); } doublescroll('mainplh_boAutoOddsTable1_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable2_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable3_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable4_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable5_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable6_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable7_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable8_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable9_divScrollContainer'); doublescroll('mainplh_boAutoOddsTable10_divScrollContainer'); 

Answer 2

Make a check for the existence of element in your function:

 function doublescroll(element) { if(!element) { return false; } var scrollbar= document.createElement('div'); scrollbar.appendChild(document.createElement('div')); scrollbar.style.overflow= 'auto'; scrollbar.style.overflowY= 'hidden'; scrollbar.style.width= '506px'; scrollbar.firstChild.style.width= element.scrollWidth+'px'; scrollbar.firstChild.style.paddingTop= '1px'; scrollbar.firstChild.appendChild(document.createTextNode('\xA0')); scrollbar.onscroll= function() { element.scrollLeft= scrollbar.scrollLeft; }; element.onscroll= function() { scrollbar.scrollLeft= element.scrollLeft; }; element.parentNode.insertBefore(scrollbar, element); } 

Answer 3

If the item is not found using getElementById , null returned.

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById?redirectlocale=en-US&redirectslug=DOM%2Fdocument.getElementById

Make a check of your function at the beginning.

 function doublescroll(element) { if(element === null) { return; } //rest of code here. 

Answer 4

Check the element at the beginning of the function:

 if(!element) { return; }