HTMLでの警告の消去

Question

3つのJSPページを作成しています。各ページには異なるIDを持つ4つのボックスがあります（ページ1のボックス1、ボックス2、ボックス3、ボックス4、ページ3のボックス5、ボックス6、ボックス7、ボックス8、ボックス9、ボックス10、ボックス11、ボックス12）。以下は、1ページのサンプルコードです。

<div class="dragableBox" id="box1">CAT</div> 
<div class="dragableBox" id="box2">DOG</div> 
<div class="dragableBox" id="box3">HORSE</div> 
<div class="dragableBox" id="box4">TIGER</div> 

各ページにもスクリプトがあります。スクリプトでは、上記のすべてのidsを意図的に関数のパラメータとして使用します。以下のサンプルコードは、1ページである：

dragDropObj.addSource('box1',true); 
dragDropObj.addSource('box2',true); 
dragDropObj.addSource('box3',true); 
dragDropObj.addSource('box4',true); 
dragDropObj.addSource('box5',true); 
dragDropObj.addSource('box6',true); 
dragDropObj.addSource('box7',true); 
dragDropObj.addSource('box8',true); 
dragDropObj.addSource('box9',true); 
dragDropObj.addSource('box10',true);  
dragDropObj.addSource('box11',true);  
dragDropObj.addSource('box12',true);  

私の知る限りでは、これは私のプログラムを動作させるための唯一の方法ですので、私はこれを行う必要があります。私が遭遇する問題は、プログラムが起動するたびに警告が表示されるということです。 "id5のソース要素は存在しません"

この警告でもプログラムは正常に動作しますが、まだ警告を取り除きたいと思います。

私の質問はここにあります： このような警告が表示されないようにするにはどうすればよいですか？ HTMLでエラーを捕捉する方法がありますか？

Answer 1

if (document.getElementById('box1')){ 
    dragDropObj.addSource('box1',true); 
    dragDropObj.addSource('box2',true); 
    dragDropObj.addSource('box3',true); 
    dragDropObj.addSource('box4',true); 
} 
if (document.getElementById('box5')){ 
    dragDropObj.addSource('box5',true); 
    dragDropObj.addSource('box6',true); 
    dragDropObj.addSource('box7',true); 
    dragDropObj.addSource('box8',true); 
} 
if (document.getElementById('box9')){ 
    dragDropObj.addSource('box9',true); 
    dragDropObj.addSource('box10',true); 
    dragDropObj.addSource('box11',true); 
    dragDropObj.addSource('box12',true); 
} 

EDIT：

よりよい解決策：

groupFirstMember = 1; 
if (document.getElementById('box5')){ 
    groupFirstMember = 5; 
} 
else if (document.getElementById('box9')){ 
    groupFirstMember = 9; 
} 

for(i=0;i<4;i++){ 
    dragDropObj.addSource("box"+str(groupFirstMember+i),true); 
} 

Answer 2

追加する前に、要素の存在を確認してください。

if (typeof document.getElementById('box5') !== 'undefined'){ 
    // continue 
} 

Answer 3

はこれを試してみてください：このページおよび実行時にすべての 'dragableBox' をつかむだろう 'dragDropObj.addSource（...、真の）;'あなたがJQueryを使わずにid = box [x]を持っていれば、それらの上に：

boxes = document.getElementsByClassName('dragableBox'); 
for (i=0; i < boxes.length; ++i) { 
    var id = boxes[i].id; 
    if(id.substring(0,3)==='box') 
    dragDropObj.addSource(id,true); 
}