Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

    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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <span>+</span>
    when doing this javascript comparison:

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

    Code:
    <span><img src=../img/art/expand.jpg></img></span>
    when doing this javascript comparison:

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

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Have you tried using getElementsByTagName()?

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

  • #5
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

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

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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:

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

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •