Changing innerHTML for div

rekha's Avatar
Contributor
Hi,

Div innerHTMl not working in IE6.

Code:
function toggleVisiblity()
{
  var name1="eg";
 
	var tbl = document.getElementById("chart1");alert(tbl);alert(tbl.style.display);
alert(tbl.nodeName);	var clink=document.getElementById("chartlink");

    if(tbl!=null){
	if (tbl.style.display == 'block')
	{
	    tbl.innerHTML="";
		tbl.style.display = 'none';
		
	}
	else
	{
	    tbl.innerHTML="<img src=../../temp/"+name1+".png>";
		tbl.style.display = 'block';
 	
	}
	}
}
Code:
<div align=left><a id='chartlink' href=# onclick=\"toggleVisiblity()\"><img src=\"../images/chart.gif\" border=0></a></div><div id='chart' style='display:none;' align=center></div>
In this code everytime eg.png is a new image.But the new image is not shown in the div but it is updating in the temp folder.
SaswatPadhi's Avatar, Join Date: May 2009
~ Б0ЯИ Τ0 С0δЭ ~
I think you missed a pair of quotes here :
Code:
.
.
	else
	{
	    tbl.innerHTML="<img src=../../temp/"+name1+".png>";
		tbl.style.display = 'block';
 	
	}
.
.
Try changing it to : tbl.innerHTML="<img src=\"../../temp/"+name1+".png\">";
rekha's Avatar
Contributor
Hi

Thanks for you reply.But I tried that also but is is also not working.The issue is not with the quotes.I think the issue is in the updation of the image.The new image is updated in the temp folder.But it is not updated even when the page is refreshed.

Pls help........
venami's Avatar, Join Date: Dec 2008
Ambitious contributor
Is the permission for the image file set correctly?
venami's Avatar, Join Date: Dec 2008
Ambitious contributor
I have made little changes to your code and posted here the corrected one. The problem seems to be the '\' escape character that you used, which is not required in your case. The changes are marked with red colour.

Code:
<html>

<head>
<title>Sample Page</title>
<script type="text/javascript">
function toggleVisiblity()
{
  var name1="eg";
 
    var tbl = document.getElementById("chart");
    alert(tbl);
    alert(tbl.style.display);
    alert(tbl.nodeName);
    var clink=document.getElementById("chartlink");

    if(tbl!=null){
    if (tbl.style.display == 'block')
    {
        tbl.innerHTML="";
        tbl.style.display = 'none';
        
    }
    else
    {
        tbl.innerHTML="<img src=../images/" + name1 + ".png>";
        tbl.style.display = 'block';
     
    }
    }
}
</script>
</head>

<body>
<div align=left>
<a id='chartlink' href=# onclick="toggleVisiblity()"><img src="../images/chart.gif" border=0></a>
</div>
<div id='chart' style='display:none;' align=center>
</div>
</body>

</html>
Let me know whether this works or not.

Last edited by venami; 13Jan2010 at 11:53.. Reason: Highlighted the changed part in red.
rekha's Avatar
Contributor
Hi venami,

I used the code inside php.So I used the escape symbol.Here I quoted just the code.

And also the permission for the image is set right.It is working fine in firefox.In IE it is not working.

Last edited by rekha; 13Jan2010 at 12:09.. Reason: content added
venami's Avatar, Join Date: Dec 2008
Ambitious contributor
Then it might be the Javascript compatibility issue with IE.

Since I wont be having access to the web server till Sunday, I could not help you immediately. Otherwise I could have done something now.
rekha's Avatar
Contributor
Hi venami,

Its ok.Thanks for your replies.If I found the workaround I will put it here.
urstop's Avatar, Join Date: Oct 2007
Contributor
Also, are your sure that it is going into the IF block of your javascript, did you verify that.
rekha's Avatar
Contributor
Hi,

Yes.It is going to the if block and tbl is not null only.