JavaScript - Innerhtml Problem Explorer

I have the non-standard element
Code:

<testele></testele>

In every browser except IE, this bit of JavaScript will successfully change the content of the above element
Code:

document.getElementsByTagName("testele")[0].innerHTML = 'hi';

However, if I change the <testele> to just a <span> (in the HTML and the JavaScript), it now successfully changes the content of the element in every browser, including IE.

Is there any fix? I have searched around and tried a bunch to no avail.

Thanks!

Hi.

I've created a test page with loads of comments on the source, as this is quite hard to explain. phurley.co.uk/test.php - (if you select 'specific date', this is the one i'm trying to get working for now)

Basically, I have a text box that when selected makes a calendar pop up. This works fine, but I am now making the html for the text box be produced via innerHTML in a JS function (with select boxes and a case/break), and the pop up no longer works.

I've tried all night to get this working but my JS skills are letting me down. If you could take the time to have a look at the source code it would be very very much appreciated.

thank you

Hello All,

I'm new to javascript and trying to build a news page that has expandable/collapsible headlines. I copied some javascript to do this that works fine except that when I try to replace the clickable '+' or '-' characters with clickable images, somehow doing a comparison of the innerHTML in order to toggle it from the plus image to the minus image doesn't work. I'm assuming it has to do with how innerHTML translates tagged html vs. straight characters or text, but have tried everything and can't fix it. Any help would be greatly appreciated. Below are the script and the html in the body.

Here's the script:

Code:

<style type="text/css"><!--
.save{
   behavior:url(#default#savehistory);}
a.dsphead{
   text-decoration:none;}
a.dsphead:hover{
   text-decoration:underline;}
a.dsphead span.dspimg{
   font-weight:normal;}
.dspcont{
   display:none;}
//--></style>

<script type="text/javascript"><!--
function dsp(loc){
   if(document.getElementById){
      var foc=loc.firstChild;
      foc=loc.firstChild.innerHTML?
         loc.firstChild:
         loc.firstChild.nextSibling;
	  
	// this is the problem area, which worked when it was like this:
	// foc.innerHTML=foc.innerHTML=='+'?'-':'+';
	foc.innerHTML=foc.innerHTML=='<img src=../img/art/expand.png></img>'?'<img src=../img/art/collapse.png></img>':'src=../img/art/expand.png></img>';
	  
        foc=loc.parentNode.nextSibling.style?
           loc.parentNode.nextSibling:
           loc.parentNode.nextSibling.nextSibling;
      foc.style.display=foc.style.display=='block'?'none':'block';
}}  
	  
if(!document.getElementById)
   document.write('<style type="text/css"><!--\n'+
      '.dspcont{display:block;}\n'+
      '//--></style>');
      //--></script>

<noscript>
<style type="text/css"><!--
.dspcont{display:block;}
//--></style>
</noscript>

And here is the html:

Code:

<h3><a href="javascript:void(0)" class="dsphead"
   	onclick="dsp(this)">
	<!-- this is the problem area which worked when it was like this:
	<span class="dspimg">+</span>  
        -->
   	<span class="dspimg"><img src=../img/art/expand.png></img></span>August 2, 2010 - Latest Headline</a></h3>
   <div class="dspcont"><br /><p>Content paragraph 1</p><p>Content paragraph 2</p>

Hi guys,

The code in question is www.spectral.og.uk/test5/work2.htm

I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first.

So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think.

I have tried so hard to research into this but it just doesn't work.

Is the problem to do with that :-

1) You can't ID something within <script>, ie BIGCHANGE in this instance.

2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc

Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this!

Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this!

Dom

Hey guys,
I've just started with javascript so please, be gentle

I am making a wordpress plug-in which puts a banner-rotator on the front page which is able to load both images and flvs'.

It has a carousel menuand the images/objects are loaded as you hover over the thumbnails.

I have made an js array in a php loop so that every element of the menu list gets assigned a different onMouseOver function when it is generated.

Because I was not able to change FlashVars with js I have put the whole object embed code in one variable and insert that in a div with innerHTML when mouseOver.

This works fine in firefox but not at all in any other browsers!!

What can I do?

The website is located at: www.mediapod.org/jwp

Here is the code:
Code:

function wp_main_player() {
global $wpdb;
$noChartsID = $wpdb->get_col($wpdb->prepare("SELECT * FROM wp_term_relationships WHERE term_taxonomy_id = 5"));
$noCharts = count($noChartsID);
?>
<div class="box" style="height:350px;">
<div id="maind" style="height:280px;">
<div id="icont">
<a id="link" href="#"><img name="main" height="280" width="560" src="" /></a>
</div>
<div id="fcont" style="display:none; width:100%; height:100%; background:#fff;">
</div>
</div>
<a class="pprev" style="float:left; width:10px; height:60px; margin-top:10px;" href="javascript:void(0)"></a>
<div class="player" style="float:left; margin-top:11px; width:540px !important;">
<script>
var myCode = [];
</script>
    <ul style="float:left;">
<?php 
if ($noCharts > 0) {
for ($i = 0; $i < $noCharts; $i += 1) {
$posts = $wpdb->get_row("SELECT * FROM wp_posts WHERE id = $noChartsID[$i]", ARRAY_A);
$link = $wpdb->get_row("SELECT * FROM wp_postmeta WHERE post_id = $noChartsID[$i] AND meta_key ='link'", ARRAY_A);
$link = $link['meta_value'];
$image = $posts['post_content'];
$flv = strpos($image, 'flv:');

if ($flv==1){
$flv = str_replace("-flv:", "", $image);
$flv = substr(rstrstr($flv, '-img:'),0 ,-6);
$image = substr(strstr($image, '-img:'), 5);
?>

<script>
myCode[<?php echo $i; ?>]=<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="560" height="280" id="FlashXMLShoutcastRadioPlayerV4.0" align="middle">	
<param name="allowScriptAccess" value="sameDomain" />
								<param name="movie" value="http://www.mediapod.org/jwp/wp-content/plugins/JRockControll/FLVPlayer_Progressive.swf" />
								<param name="menu" value="false" />
								<param name="quality" value="high" />
                               <param name="wmode" value="opaque" ></param>
<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=http://www.mediapod.org/jwp/wp-content/plugins/JRockControll/Corona_Skin_1&amp;streamName=<?php echo $flv; ?>&amp;autoPlay=true&amp;autoRewind=false"   />
<param name="bgcolor" value="#111111" />
								<embed bgcolor="#111111" wmode="opaque" src="http://www.mediapod.org/jwp/wp-content/plugins/JRockControll/FLVPlayer_Progressive.swf" menu="false" FlashVars ="&amp;MM_ComponentVersion=1&amp;skinName=http://www.mediapod.org/jwp/wp-content/plugins/JRockControll/Corona_Skin_1&amp;streamName=<?php echo $flv; ?>&amp;autoPlay=true&amp;autoRewind=false" quality="high" width="560" height="280" name="FlashXMLShoutcastRadioPlayerV4.0" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
						</object>;




</script>

        <li class="p_img"><img onmouseover="document.getElementById('icont').style.display='none';document.getElementById('fcont').style.display=''; document.getElementById('fcont').innerHTML=myCode[<?php echo $i; ?>]; document.main.src='<?php echo $image;?>'; document.getElementById('link').href='<?php echo $link;?>';" src="<?php echo $image;?>" height="52" width="102" /></li>
<?php 
} else {
?>
        <li class="p_img"><img onmouseover="document.getElementById('icont').style.display=''; document.getElementById('fcont').innerHTML=''; document.getElementById('fcont').style.display='none'; document.main.src='<?php echo $image;?>'; document.getElementById('link').href='<?php echo $link;?>';" src="<?php echo $image;?>" height="52" width="102" /></li>
<?php 
}
}
}
?>
    </ul>
</div>
<a class="pnext" style="float:right; width:10px; height:60px;  margin-top:10px;" href="javascript:void(0)"></a>
<script type="text/javascript">
		jQuery(function() {
			jQuery(".player").jCarouselLite({
				btnNext: ".pnext",
				btnPrev: ".pprev",
                                speed: 300,
                                visible: 5
			});
		});
		</script>
</div>
<?php
}

It is an absolute mess

Thank you.