problem comparing innerHTML contents

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:


<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:


<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>

Check your HTML code to make sure:
1. That the '+' and '-' characters are not HTML entities &plus; and &minus;
2. That the '+' and '-' characters you see are not really images of the characters.

jmrker,

I think my post was confusing. I don't want to use the '+' and '-' characters, I was just saying that in the original code I lifted, those characters between tags worked fine when you went to do javascript comparisons.

In other words, this worked:

<span>+</span>


when doing this javascript comparison:


foc.innerHTML=foc.innerHTML=='+'?'-':'+';


But I don't want to do that. I want to use images. However, the javascript comparison of innerHTML doesn't work for some reason when it's images that are between the span tags.

In other words, this doesn't work:


<span><img src=../img/art/expand.jpg></img></span>


when doing this javascript comparison:


foc.innerHTML=foc.innerHTML=='<img src=../img/art/expand.png></img>'?'<img src=../img/art/collapse.png></img>':'src=../img/art/expand.png></img>';


Is this clearer? Sorry to make it so confusing.

Thanks,
Neil

Have you tried using getElementsByTagName()?

So instead of changing foc.innerHTML,
change foc.getElementsByTagName("img")[0].src value to either
../img/art/collapse.png
or
../img/art/expand.png"

Sorry to take so long to respond.

That didn't work.

But I discovered something that I find really odd. Again, I'm new to javascript, so don't know what is happening under the covers for javascript, but in the script if I directly assign foc.innerHTML a string value, and then in the next line compare foc.innerHTML to that string, it doesn't see them as equal. Can SOMEONE tell me what innerHTML is doing in terms of interpreting the html so that it doesn't see the value as being equivalent to a string I just assigned it? I've tried escpae() and unescape(). I've tried to toString() and NOTHING works.

Here's what I did as a test in the script:


var expandstring = "<img src=../img/art/expand.png></img>" ;
foc=loc.firstChild.innerHTML?
loc.firstChild:
loc.firstChild.nextSibling;

foc.innerHTML = expandstring ; // and sure enough, it takes the expandstring

if ( foc.innerHTML == expandstring ) { document.write("match") ; }
else { document.write("no match") }


When running this, it outputs "no match"

If anyone has any ideas why this is happening, I'd love to know.

Thanks,
Neil

Of course

By assigning "expandstring" to innerHTML you force the browser engine to interpret your string and convert it into a valid DOM structure. So (at least) it will automatically add the missing quotes for the src string. When you compare the element's innerHTML to the same string afterwards, it will be taken from the (now compliant) DOM structure and will not be the same as before.

Ahhh. So then my question is what does the now compliant innerHTML string for my img look like so that I COULD do a proper string compare?

I ask because what I did in my example was a little test, and not what I'm actually trying to do. I'm actually trying to toggle back and forth between two images set inside a div tag so that each time you click on the image it toggles. And even though the image changes if I assign it expandstring outright, whenever I try to do a compare it doesn't compare correctly. I figured it was something about the formatting, but I don't know enough about that DOM structure and how it represents the html to figure it out.

Any help would be GREATLY appreciated.

Neil

I don't know enough to tell you exactly what the problem is, but I can tell you that innerHTML is very picky when it comes to apostrophes and quote marks.

Here is an example of an innerHTML string that I (finally) got working after much tweaking and hair-pulling:

sidebar_html += '<div id="category"><input type="checkbox" id="'+category+'" onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');"></div><div id="bus"><a href="/map/route'+poly_num+'.htm"><img border=0px; src="caricon.png"></a></div><div id="label">' + label + '</div><br />';


(which then got passed into innerHTML here, in case you're wondering:
document.getElementById("sidebar").innerHTML = sidebar_html;

Anyway. The point is that some apostrophes needed to be escaped (as in: \''+category+'\' and places where you think an apostrophe would work needed a quote mark and all sorts of other crazy stuff. I'm sure if you google you will find a logical explanation to it all...

Looking over your code, I would think that '<img src=../img/art/expand.png></img>' would cause a problem, as in my case '<img border=0px; src="caricon.png">' worked (note use of " and no closing tag). But like I say, I don't really know... but that might give you something to play with for a while :D

<html>
<head></head>
<body>
<script type="text/javaScript">
// From: http://www.codingforums.com/showthread.php?p=1044024#post1044024

function toggleValue() {
var imgSrc = document.getElementById('currentItem').src;
// alert(imgSrc); // for testing purposes
var flag = imgSrc.indexOf('plus-8.png'); // alert(flag+' : '+imgSrc);
if (flag != -1) {
document.getElementById("currentItem").src = "minus-8.png";
} else {
document.getElementById("currentItem").src = "plus-8.png";
}
}
</script>

<table width =" 200" border="0">
<tr>
<td colspan=2>
<br><center>
<a href="#" onclick="toggleValue()">Toggle Value</a>
</center>
</td>
</tr>
<tr>
<td>
<strong>Value:</strong>
</td>
<td>
<img id="currentItem" src="plus-8.png" height="25px" width="25px"></img>
</td>
</tr>
</table>
</body>
</html>

You did not provide the images, so I found some substitutes.