javascript - 検索後に getElementById が見つからない場合に js 関数が実行されないようにするにはどうすればよいですか?

Question

水平 div にトップ スクロールを追加するスクリプトがあります。スクリプトは、最大 10 個の異なる div に追加する必要があります。(mainplh_boAutoOddsTable1_divScrollContainer から mainplh_boAutoOddsTable10_divScrollContainer へ)

これを行うために、スクリプトを 10 回呼び出します (以下は最初の 3 つの例です)。ただし、div の 1 つが欠落している場合、スクリプトが壊れます。

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

たとえば、mainplh_boAutoOddsTable1_divScrollContainer が見つからない場合、Javascript が壊れます。どうすればこれを解決できますか? たとえば、その div 要素が見つからない場合、関数が実行されないようにしますか?

エラーメッセージ：

Uncaught TypeError: Cannot read property 'scrollWidth' of null 

これは完全な 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

関数内に が存在するかどうかを確認しelementます。

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 2

によって要素が見つからない場合はgetElementById、nullが返されます。

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

最初に関数をチェックインします。

function doublescroll(element) {
    if(element === null) {
        return;
    }

    //rest of code here.

Answer 3

コードをもう少し堅牢にする:

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 4

関数の先頭にある要素を確認します。

if(!element)
{
    return;
}