I have a script that adds a top scroll on a horizontal div. The script has to add it on up 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 are 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 mainplh_boAutoOddsTable1_divScrollContainer cannot be found it breaks my Javascript. How can I solve this? For example prevent from the function from running if it cannot find that 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'));
I have a script that adds a top scroll on a horizontal div. The script has to add it on up 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 are 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 mainplh_boAutoOddsTable1_divScrollContainer cannot be found it breaks my Javascript. How can I solve this? For example prevent from the function from running if it cannot find that 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'));
- You can check for existence before or after calling the function. – iGanja Commented Jul 5, 2013 at 15:43
- I would like to add that any solution that fixes the issue is acceptable. Including stopping the script from throwing the error when an element is not found. – Kaah Commented Jul 5, 2013 at 15:43
- all of the answers so far solve your issue. if you want the whole thing to stop, you will need to check a return value from your function, wrap all your functions calls into a looping construct and quit on any return of false. – iGanja Commented Jul 5, 2013 at 15:46
- Thanks everyone! Difficult to select an answer :) I have selected the one with the exact solution that I have implemented. – Kaah Commented Jul 5, 2013 at 16:01
4 Answers
Reset to default 4Do 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);
}
If the element is not found by getElementById, null is returned.
https://developer.mozilla/en-US/docs/Web/API/document.getElementById?redirectlocale=en-US&redirectslug=DOM%2Fdocument.getElementById
Do a check in your function at the beginning.
function doublescroll(element) {
if(element === null) {
return;
}
//rest of code here.
Making 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');
Check for the element at the start of the function:
if(!element)
{
return;
}