Page 1 of 1
getElementById error [resolved]
Posted: Sat Nov 15, 2008 7:17 am
by waqas_punjabian
Hi all,
I am trying to embed a player in a website and I want to change the video by clicking on the images below the player.
Following code is working fine in Firefox but I am getting an error in IE 7: "getElementById(..) is null or not an object."
Can somebody tell me what I am missing here:
Code: Select all
<script type="text/javascript" language="javascript">
function MoveNextMovie(filePath, layerName){
document.getElementById(layerName).innerHTML='<EMBED TYPE="application/x-mplayer2" src="'+filePath+'" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280">';
}
</script>
<table width="325" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="325" valign="top" align="left"><OBJECT id="MediaPlayer" width=325 height=280 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><PARAM NAME="FileName" value="http://www.spongetech.com/images/Complete.wmv"><param name="Showcontrols" value="True"><param name="autoStart" value="True"><PARAM name="wmode" value="opaque"><PARAM name="ShowDisplay" VALUE="false"><div id="videowrapper"><EMBED TYPE="application/x-mplayer2" src="http://www.spongetech.com/images/Complete.wmv" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280"></div></EMBED></OBJECT></td></tr>
<tr>
<td valign="top" align="left">
<table width="325" border="0">
<tbody>
<tr>
<td>
<img src="images/demo.gif" alt="Demovideos" width="73" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a><br />
<img src="images/bal.gif" alt="Balancing Act Videos" width="110" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_CarSponge.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/pud.gif" alt="" width="87" height="15" border="0" /></a>
</td>
<td> </td>
<td><a onClick="javascript: window.open('http://s245656731.onlinehome.us/video.php?video=buyscot', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
</a></td>
<td><a onClick="javascript: window.open('http://s245656731.onlinehome.us/video.php?video=district', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
</a></td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left"> </td>
</tr>
</tbody>
</table>
regards,
Waqas
Re: getElementById error
Posted: Sat Nov 15, 2008 9:38 am
by mmj
You are closing the embed tag after the div tag.
That is why validating helps out with stuff like this.
Re: getElementById error
Posted: Sat Nov 15, 2008 10:15 am
by waqas_punjabian
I have changed it as you told, now I have closed the Embed tag first then the div. But the error is still there
Code: Select all
<script type="text/javascript" language="javascript">
function MoveNextMovie(filePath, layerName){
document.getElementById(layerName).innerHTML='<EMBED TYPE="application/x-mplayer2" src="'+filePath+'" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280">';
}
</script>
<table width="325" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="325" valign="top" align="left"><OBJECT id="MediaPlayer" width=325 height=280 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><PARAM NAME="FileName" value="http://www.spongetech.com/images/Complete.wmv"><param name="Showcontrols" value="True"><param name="autoStart" value="True"><PARAM name="wmode" value="opaque"><PARAM name="ShowDisplay" VALUE="false"><div id="videowrapper"><EMBED TYPE="application/x-mplayer2" src="http://www.spongetech.com/images/Complete.wmv" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280"></EMBED></div></OBJECT></td></tr>
<tr>
<td valign="top" align="left">
<table width="325" border="0">
<tbody>
<tr>
<td>
<img src="images/demo.gif" alt="Demovideos" width="73" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a><br />
<img src="images/bal.gif" alt="Balancing Act Videos" width="110" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_CarSponge.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/pud.gif" alt="" width="87" height="15" border="0" /></a>
</td>
<td> </td>
<td><a onClick="javascript: window.open('http://s245656731.onlinehome.us/video.php?video=buyscot', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
</a></td>
<td><a onClick="javascript: window.open('http://s245656731.onlinehome.us/video.php?video=district', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
</a></td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left"> </td>
</tr>
</tbody>
</table>
Re: getElementById error
Posted: Sat Nov 15, 2008 1:55 pm
by mmj
I really don't see anything else wrong.
Try posting a validated version of this markup.
On some self closing elements you are using the "short tag" and on others you aren't.
Re: getElementById error
Posted: Sat Nov 15, 2008 10:00 pm
by infolock
Well, it's mainly cuz IE is a pain...
The issue is doing a document.getElementById(someid).innerHTML on one line... IE doesn't exactly play nicely with javascript all the time :-\
try doing it this way:
Code: Select all
function MoveNextMovie(filePath, layerName){
var tmp = document.getElementById(layerName);
tmp.innerHTML = '<EMBED TYPE="application/x-mplayer2" src="'+filePath+'" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280" />';
}
should fix your problem.
Re: getElementById error
Posted: Mon Nov 17, 2008 3:09 am
by waqas_punjabian
"infolock", Thanks for your advise but unfortunately I am still unable to solve the problem. with the help of your code the error has been changed to "null is null or not an object".
i am just getting mad on this problem

Re: getElementById error
Posted: Mon Nov 17, 2008 9:59 am
by infolock
see, this is what I was afraid of. I'm going to take a huge guess here as I can't find the answer on google, but I am going to say that creating an embed tag the way you are is incorrect.
What I did find on google though, was that you can use javascript to dynamically create and destroy embeded objects on a page.
That, or why not try applying an ID to the original embeded down at the bottom, and then doing a getElementById.src = layerName on that id, instead of dumping the contents of the div and recreating a brand new embded tag? maybe that will work? dunno, would be interesting to see though...
So, try this. delete the div container you have, keeping the original embeded tag you have (so your embed tag doesn't have a div around it anymore). give the embed tag the same id that the div had.
in your javascript code, change it from innerhtml to src, but only set the value to the src param that's passed to the function.
Re: getElementById error
Posted: Mon Nov 17, 2008 10:55 am
by mmj
I've spent hours debugging 10 lines of html just to discover some reallly obscure IE bug like getelementbyid returns elements with the matching name also (I've seen much worse but this comes to mind atm).
Re: getElementById error
Posted: Mon Nov 17, 2008 9:57 pm
by infolock
mmj: yep, this is an issue with IE, but there are multiple
workarounds for it.
however, in this issue there is only one videowrapper id, and none with the name of videowrapper, so not really a viable reason.
Re: getElementById error
Posted: Tue Nov 18, 2008 5:09 am
by waqas_punjabian
I've tried to remove the DIV and using it's id in Embed but still in vane. Getting the same error.
infolock wrote:see, this is what I was afraid of. I'm going to take a huge guess here as I can't find the answer on google, but I am going to say that creating an embed tag the way you are is incorrect.
What I did find on google though, was that you can use javascript to dynamically create and destroy embeded objects on a page.
That, or why not try applying an ID to the original embeded down at the bottom, and then doing a getElementById.src = layerName on that id, instead of dumping the contents of the div and recreating a brand new embded tag? maybe that will work? dunno, would be interesting to see though...
So, try this. delete the div container you have, keeping the original embeded tag you have (so your embed tag doesn't have a div around it anymore). give the embed tag the same id that the div had.
in your javascript code, change it from innerhtml to src, but only set the value to the src param that's passed to the function.
Re: getElementById error
Posted: Tue Nov 18, 2008 5:14 am
by waqas_punjabian
WOW, hurrayyyyyyy Greattttt, I've found the solution myself .hahahaaaaaaa
After 3 days of hard work I've found it.
But I am really thankful to all of you people, specially
"infolock"
Actually, I have generated the whole Object tag dynamically, instead of replacing just the Embed tag and it's working fine now.
here's the working code:
Code: Select all
<script type="text/javascript" language="javascript">
function MoveNextMovie(filePath, layerName){
document.getElementById(layerName).innerHTML='<OBJECT id="MediaPlayer" width=325 height=280 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><PARAM NAME="FileName" value="'+filePath+'"><param name="Showcontrols" value="True"><param name="autoStart" value="True"><PARAM name="wmode" value="opaque"><PARAM name="ShowDisplay" VALUE="false"><EMBED TYPE="application/x-mplayer2" src="'+filePath+'" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280"></EMBED></OBJECT>';
}
</script>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="390" valign="top" align="left"><span id="videowrapper"><OBJECT id="MediaPlayer" width=325 height=280 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><PARAM NAME="FileName" value="http://www.spongetech.com/images/Complete.wmv"><param name="Showcontrols" value="True"><param name="autoStart" value="True"><PARAM name="wmode" value="opaque"><PARAM name="ShowDisplay" VALUE="false"><EMBED TYPE="application/x-mplayer2" src="http://www.spongetech.com/images/Complete.wmv" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280"></EMBED></OBJECT></span></td></tr>
<tr>
<td valign="top" align="left">
<table width="390" border="0">
<tbody>
<tr>
<td>
<img src="images/demo.gif" alt="Demovideos" width="73" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a><br />
<img src="images/bal.gif" alt="Balancing Act Videos" width="110" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_CarSponge.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_PuddlePals.wmv", "videowrapper")'><img src="images/pud.gif" alt="" width="87" height="15" border="0" /></a>
</td>
<td> </td>
<td><a onClick="javascript: window.open('http://s245656731.onlinehome.us/video.php?video=buyscot', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
</a></td>
<td><a onClick="javascript: window.open('http://s245656731.onlinehome.us/video.php?video=district', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
</a></td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left"> </td>
</tr>
</tbody>
</table>
Re: getElementById error
Posted: Tue Nov 18, 2008 7:25 am
by mmj
infolock wrote:mmj: yep, this is an issue with IE, but there are multiple
workarounds for it.
however, in this issue there is only one videowrapper id, and none with the name of videowrapper, so not really a viable reason.
I wasn't saying that it was a possibility, just mentioning the fact.