asked on

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

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

coolersport

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

websyn

ASKER

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

coolersport

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.

coolersport

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

websyn

ASKER

i'm calling initHIS3() in body load

websyn

ASKER

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

coolersport

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

ASKER CERTIFIED SOLUTION

websyn

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Badotz

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.

Badotz

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.

document.getElementById(&quot;IMG_ID&quot;).onclick is not working in firefox

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