Eliminating warning in HTML

[Iman Paryudi]

I am creating 3 jsp pages. There are 4 boxes with different id in each page (i.e. box1, box2, box3, box 4 in page 1; box 5, box6, box7, box8 in page 2; box9, box10, box11, box12 in page 3). Below is the sample code in page 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>

In each page there is also a script. In the script I deliberately use all those ids above as parameters of a function. Below is the sample code in page 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);	

I must do this because this is AFAIK is the only way for my program works. The problem I encounter is that each time the program started, a warning appears:
"The source element with id box5 does not exist"

Althoug the program still works fine with this warning, I still want to eliminate the warning.

My question here is:
How can I stop such warning from appearing?
Is there a kind of catching error method in HTML?

[Tim Moores]

If box5 only exists on page 2, then you should only access it on page 2. I would assume that you get similar error messages on page 2 for box 1?

[Iman Paryudi]

If box5 only exists on page 2, then you should only access it on page 2. I would assume that you get similar error messages on page 2 for box 1?

I am not sure Tim, but may be not. AFAIK, the error mesaage only appears in page 1 when the program started at the first time. Because after I close the message and I open page 2, no such message appears. But I can understand your assumption.
If I delete box5 in page 1, then another error message will be:
"The source element with id box6 does not exist"
And so on.

If I delete all boxes except box1 to box4, then there will be no more warning but the program will not work anymore. That is why I must mention box5 to box12 in page 1 in order for my program working.

So, how can I eliminate the message?

[Vivek Kanodia]

You should only access box1,box2,box3 and box4 in page1 and box5,box6,box7,box8 in page2. Else you will get an error since page1 does not recognize(box5,bo6,box7 and so on).

[Jack Numen]

That is a valid error since Box5 is undefined and you are trying to access Box5 which is not declared in the page.
If you still can't find the reason try adding a try catch block like

try{
dragObj.addSource("box5",true);
}catch(error){
alert("Error is:"+error); //Remove this alert after you check
}

add try catch block for the remaning boxes whch are not yet included in your page.
This should solve.

If I delete all boxes except box1 to box4, then there will be no more warning but the program will not work anymore. That is why I must mention box5 to box12 in page 1 in order for my program working.

This might be due to some logical error in your code.

[Iman Paryudi]

Finally, I have solved my problem.

Thank you Vivek and Jack for your replies.

[Eric Pascarello]

You can always loop and see if the element exists, seems a lot better than the copy/paste nature of your original code.

for (var i=1;i<=12;i++) { var id = "box" + i; if (document.getElementById(id) ) { dragDropObj.addSource(id,true); } }