document.getElementById("IMG_ID").onclick is not working in firefox

websyn
websyn used Ask the Experts™
on
hi All,

 I'm using some java script that will scroll the images. for each image has diffrent link.
Problem is that script is working IE but not in Firefox. below is the script.
<script type="text/javascript" language="javascript">
 
	var data=new Array(5);
	data=[
	['Images/Video_Images/image1.png','1','video.html'],
	['Images/Video_Images/image2.png','2','video.html'],
	['Images/Video_Images/image3.png','3','video.html'],
	["Images/Video_Images/image4.png","4","video.html"],
	["Images/Video_Images/image5.png","5","video.html"]]
 
	imgPlaces=5 
	imgWidth=176
	imgHeight=128 
	imgSpacer=4 
	dir=0 
	newWindow=1 
	moz=document.getElementById&&!document.all
	step=1
	timer=""
	speed=50
	nextPic=0
	initPos=new Array()
	nowDivPos=new Array()
 
 
	function initHIS3()
	{
		for(var i=0;i<imgPlaces+1;i++){ 
		newImg=document.createElement("IMG")
		newImg.setAttribute("id","pic_"+i)
		newImg.setAttribute("src","")
		newImg.style.position="absolute"
		newImg.style.width=imgWidth+"px"
		newImg.style.height=imgHeight+"px"
		newImg.style.border=0
		newImg.alt=""
		newImg.i=i
		newImg.onclick=function(){his3Win(data[this.i][2])}
		document.getElementById("display_area").appendChild(newImg)
	}
 
	containerEL=document.getElementById("his3container")
	displayArea=document.getElementById("display_area")
	pic0=document.getElementById("pic_0")
	containerBorder=(document.compatMode=="CSS1Compat"?0:parseInt(containerEL.style.borderWidth)*2)
	containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
	containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
	containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"
	displayArea.style.width=containerWidth+"px"
	displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"
	displayArea.onmouseover=function(){stopHIS3()}
	displayArea.onmouseout=function(){scrollHIS3()}
	imgPos= -pic0.width
 
	for(var i=0;i<imgPlaces+1;i++){
		currentImage=document.getElementById("pic_"+i)
		if(dir==0){imgPos+=pic0.width+imgSpacer} 
		initPos[i]=imgPos
		if(dir==0){currentImage.style.left=initPos[i]+"px"} 
		if(dir==1){ 
			document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"px"
			imgPos+=pic0.width+imgSpacer
		}
		if(nextPic==data.length){nextPic=0}
		currentImage.src=data[nextPic][0]
		currentImage.alt=data[nextPic][1]
		currentImage.i=nextPic
		currentImage.onclick=function(){his3Win(data[this.i][2])}
		nextPic++
		}
		scrollHIS3()
	}
 
 
 
	timer=""
	function scrollHIS3()
	{
		clearTimeout(timer)
		for(var i=0;i<imgPlaces+1;i++){
			currentImage=document.getElementById("pic_"+i)
			nowDivPos[i]=parseInt(currentImage.style.left)
			if(dir==0){nowDivPos[i]-=step}
			if(dir==1){nowDivPos[i]+=step}
			if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth)
			{
				if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
				if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}
				if(nextPic>data.length-1){nextPic=0}
				currentImage.src=data[nextPic][0]
				currentImage.alt=data[nextPic][1]
				currentImage.i=nextPic
				currentImage.onclick=function(){his3Win(data[this.i][2])}
			  nextPic++
			}
			else
			{
				currentImage.style.left=nowDivPos[i]+"px"
			}
		}
		timer=setTimeout("scrollHIS3()",speed)
	}
 
	function stopHIS3(){
		clearTimeout(timer)
	}
 
 
 
	function his3Win(loc){
		window.navigate(loc);
	}
 
</script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Make sure you put the image's id properly. See the following example which works in IE but not in Firefox. IE just use name attribute as a fallback if id is missing /not found.
<input type="text" name="abc" onclick="alert(document.getElementById('abc').value);">

Open in new window

Author

Commented:
i'm setting this ID like - newImg.setAttribute("id","pic_"+i).
is it not correct way to define ID? if not plz tell me how to set ID.
Thnaks fro ur fast reply
That's is correct. I suspect that you've done it incorrectly somewhere else. Please post the source so I can have a better look. From what I can see, the image creation and insertion are correct. You should be able to use document.getElementById('pic_'+i) after the appendChild(newImg) execution.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Make sure initHIS3() is called before you can reference to those images.

Author

Commented:
i'm calling initHIS3()  in body load

Author

Commented:
plz find my html code here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to the world  </title>
 
</head>
 
<body onload="initHIS3()">
<table width="1003" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="bottom" class="home_top"><table width="940" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:5px;">
      <tr>
        <td width="416" align="right" valign="bottom"><a href="default.htm"><img src="Images/Video_Images/welcome.png" alt="" width="350" height="90" border="0" /></a></td>
        <td width="524" align="right" valign="bottom"><img src="Images/Video_Images/logo.png" alt="" width="129" height="63" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center" valign="top" class="home_mdl"><table width="950" border="0" cellspacing="0" cellpadding="0">
      
      <tr>
        <td align="right" valign="top"><table width="840" border="0" cellspacing="0" cellpadding="0" style="margin-right:25px;">
          <tr>
            <td width="377" align="left" valign="bottom"><table width="326" border="0" cellspacing="0" cellpadding="0" style="margin-top:154px;">
                <tr>
                  <td align="center" valign="top" class="login-bg"><table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-top:25px;">
                      <tr>
                        <td width="38%" height="30" align="center" valign="middle">Username :</td>
                        <td width="62%" align="left" valign="middle"><input name="textfield" type="text" class="border" id="textfield" /></td>
                      </tr>
                      <tr>
                        <td height="30" align="center" valign="middle">Password :</td>
                        <td align="left" valign="middle"><input name="textfield2" type="text" class="border" id="textfield2" /></td>
                      </tr>
                      <tr>
                        <td height="25" align="left" valign="middle"></td>
                        <td align="left" valign="bottom" style="padding-left:20px; padding-bottom:3px;">Word Verification</td>
                      </tr>
                      <tr>
                        <td height="30" align="left" valign="top"><img src="Images/Video_Images/vinka.gif" alt="" width="108" height="24" /></td>
                        <td align="left" valign="top" style="padding-top:1px;"><input name="textfield3" type="text" class="border1" id="textfield3" /></td>
                      </tr>
                      <tr>
                        <td colspan="2" align="left" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td width="8%" height="25" align="left" valign="middle"><input type="checkbox" name="checkbox" id="checkbox" /></td>
                              <td width="60%" align="left" valign="middle"> I agree to the terms &amp; conditions.</td>
                              <td width="32%" align="left" valign="middle"><a href="video.html"><img src="Images/Video_Images/enter.gif" alt="" width="78" height="30" border="0" /></a></td>
                            </tr>
                            <tr>
                              <td height="25" align="left" valign="middle"></td>
                              <td align="left" valign="middle">Forgotten Password?</td>
                              <td align="left" valign="middle"><a href="#"><img src="Images/Video_Images/apply.gif" alt="" width="78" height="32" border="0" /></a></td>
                            </tr>
                        </table></td>
                      </tr>
                  </table></td>
                </tr>
            </table></td>
            
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center" valign="top" class="home_btm"><table width="900" border="0" cellspacing="0" cellpadding="0" style="padding-top:20px;">
      <tr>
        <td align="left" valign="middle">
        <div id="his3container" style="position: relative; width: 100%; height: 0px; border: 0px solid red;
                 overflow: hidden">
 
                <div id="display_area" style="cursor: hand; position: absolute; left: 0; top: 0;
 
                    width: 0px; height: 126px; clip: rect(0,0,0,0)">
 
                </div>
 
            </div>
 
        </div>
        <script type="text/javascript" language="javascript">
 
  
 
var data=new Array(5);
					
					 
					data=[
					['Images/Video_Images/image1.png','1','video.html'],
					['Images/Video_Images/image2.png','2','video.html'],
					['Images/Video_Images/image3.png','3','video.html'],
					["Images/Video_Images/image4.png","4","video.html"],
					["Images/Video_Images/image5.png","5","video.html"]]
					
					
					//alert(data[0]);
 
 
 
imgPlaces=5 
 
imgWidth=176
 
imgHeight=128 
 
imgSpacer=4 
 
 
 
dir=0 
 
newWindow=1 
 
moz=document.getElementById&&!document.all
 
step=1
 
timer=""
 
speed=50
 
nextPic=0
 
initPos=new Array()
 
nowDivPos=new Array()
 
 
 
function initHIS3(){
 
 
 
for(var i=0;i<imgPlaces+1;i++){ 
 
	newImg=document.createElement("IMG")
 
	newImg.setAttribute("id","pic_"+i)
 
	newImg.setAttribute("src","")
 
	newImg.style.position="absolute"
 
	newImg.style.width=imgWidth+"px"
 
	newImg.style.height=imgHeight+"px"
 
	newImg.style.border=0
 
	newImg.alt=""
 
	newImg.i=i
 
 	newImg.onclick=function(){his3Win(data[this.i][2])}
	
	//document.getElementById("pic_"+i).onclick = function(){his3Win(data[this.i][2])}
 
	document.getElementById("display_area").appendChild(newImg)
 
}
 
 
 
containerEL=document.getElementById("his3container")
 
displayArea=document.getElementById("display_area")
 
pic0=document.getElementById("pic_0")
 
 
 
containerBorder=(document.compatMode=="CSS1Compat"?0:parseInt(containerEL.style.borderWidth)*2)
 
containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
 
containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
 
containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"
 
 
 
displayArea.style.width=containerWidth+"px"
 
displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"
 
displayArea.onmouseover=function(){stopHIS3()}
 
displayArea.onmouseout=function(){scrollHIS3()}
 
 
 
imgPos= -pic0.width
 
 
 
for(var i=0;i<imgPlaces+1;i++){
 
currentImage=document.getElementById("pic_"+i)
 
 
 
if(dir==0){imgPos+=pic0.width+imgSpacer} 
 
 
 
initPos[i]=imgPos
 
if(dir==0){currentImage.style.left=initPos[i]+"px"} 
 
 
 
if(dir==1){ 
 
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"px"
 
imgPos+=pic0.width+imgSpacer
 
}
 
//alert(data);
 
if(nextPic==data.length){nextPic=0}
 
 
 
currentImage.src=data[nextPic][0]
 
currentImage.alt=data[nextPic][1]
 
currentImage.i=nextPic
 
//alert(data[nextPic][0]);
 
currentImage.onclick=function(){his3Win(data[this.i][2])}
 
nextPic++
 
 
 
}
 
 
 
scrollHIS3()
 
}
 
 
 
timer=""
 
function scrollHIS3(){
 
clearTimeout(timer)
 
for(var i=0;i<imgPlaces+1;i++){
 
currentImage=document.getElementById("pic_"+i)
 
 
 
nowDivPos[i]=parseInt(currentImage.style.left)
 
 
 
if(dir==0){nowDivPos[i]-=step}
 
if(dir==1){nowDivPos[i]+=step}
 
 
 
if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth){
 
 
 
if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
 
if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}
 
 
 
if(nextPic>data.length-1){nextPic=0}
 
 
 
currentImage.src=data[nextPic][0]
 
currentImage.alt=data[nextPic][1]
 
currentImage.i=nextPic
 
currentImage.onclick=function(){his3Win(data[this.i][2])}
 
 
 
nextPic++
 
 
 
}
 
else{
 
currentImage.style.left=nowDivPos[i]+"px"
 
}
 
 
 
}
 
timer=setTimeout("scrollHIS3()",speed)
 
 
 
}
 
 
 
function stopHIS3(){
 
clearTimeout(timer)
 
}
 
 
 
function his3Win(loc){
	window.navigate(loc);
 }
 
  </script></td>
      </tr>
    </table></td>
  </tr>
  
  <tr>
    <td height="42" align="center" valign="middle" class="footercolor"><table width="965" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="444" align="left">Best viewed at 1004x768 screen resolution </td>
        <td width="546" align="right">© 2009  t</td>
      </tr>
    </table>    </td>
  </tr>
</table>
 </body>
</html>

Open in new window

Is this the line you said it didn't work?

document.getElementById("pic_"+i).onclick = function(){his3Win(data[this.i][2])}

If so, please move it to after the appendChild line as bellow.

Apart from that, I don't see why it doesn't work for you.
for(var i=0;i<imgPlaces+1;i++){ 
 
	newImg=document.createElement("IMG")
 
	newImg.setAttribute("id","pic_"+i)
 
	newImg.setAttribute("src","")
 
	newImg.style.position="absolute"
 
	newImg.style.width=imgWidth+"px"
 
	newImg.style.height=imgHeight+"px"
 
	newImg.style.border=0
 
	newImg.alt=""
 
	newImg.i=i
 
 	newImg.onclick=function(){his3Win(data[this.i][2])}
 
	document.getElementById("display_area").appendChild(newImg)
	
	document.getElementById("pic_"+i).onclick = function(){his3Win(data[this.i][2])}
 
}

Open in new window

Commented:
got it, i changed to  window.location =loc; in his3Win.
thnx
Top Expert 2007

Commented:
Visit http://www.jslint.com/ and run your code through the validator. Many, many errors.

Omit the <script...> and </script> tags when you paste your code into the textarea.
Top Expert 2007

Commented:
There are so many errors in your code that JSLint cannot listi them all.

You need to understand that not declaring variables is evil, expecting the interpreter to insert semicolons for you is a Very Bad Thing, and that obvious errors should not be ignored. Your lack of comments is frightful as well, although not a fatal error.

The lack of style and the bad grammar of the code snippet is difficult for me to read (or accept). I can only hope that you do put your code through JSLint, and that you learn from your mistakes, like the rest of us.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial