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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Why are these elements "full"?

    Almost the exact same codeing, but this one for some reason think all the containers are full of HTML content. Yet on another with almost identical coding, it knows there's nothing in the boxes.

    Can someone help me spot what I'm missing?


    This one doesn't work unless you click the buttons to empty the containers. Then when you click the picture they load.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <script type="text/javascript">
    
    function image1Function() {
    
    
    var b1=document.getElementById('box1').innerHTML;
    var b2=document.getElementById('box2').innerHTML;
    var b3=document.getElementById('box3').innerHTML;
    
    if (b1 === "")
      {
    document.getElementById('box1').innerHTML='<img 
    
    src="http://www.collaboration133.com/wp-content/uploads/2011/08/wordpress-icon-
    
    128.png">';
      }
    
    else if (b1 !== "" && b2 !== "" && b3 !== "")
    {
    document.getElementById('box4').innerHTML='<img src="http://alastairc.ac/wp-
    
    content/uploads/2006/07/minefield-icon.png">';
    }
    
    else if (b1 !== "" && b2 !== "" )
    {
    document.getElementById('box3').innerHTML='<img 
    
    src="http://www.mouserunner.com/images/WindowsIconPreview_128x128.png">';
    }
    
    else if ("" !== b1)
    {
    document.getElementById('box2').innerHTML='<img src="http://alastairc.ac/wp-
    
    content/uploads/2006/07/minefield-icon.png">';
    }
    
    
    else
      {
      element.src="http://alastairc.ac/wp-content/uploads/2006/07/minefield-icon.png";
      }
    }
    
    function box1Function()
    {
    
    var B1=document.getElementById("box1").innerHTML;
    
    if (B1 !== "")
    {
    document.getElementById("box1").innerHTML="";
    }
    else 
    {
    }
    }
    
    function box2Function()
    {
    
    var B2=document.getElementById("box2").innerHTML;
    
    if (B2 !== "")
    {
    document.getElementById("box2").innerHTML="";
    }
    else 
    {
    }
    }
    
    function box3Function()
    {
    
    var B3=document.getElementById("box3").innerHTML;
    
    if (B3 !== "")
    {
    document.getElementById("box3").innerHTML="";
    }
    else 
    {
    }
    }
    
    function box4Function()
    {
    
    var B4=document.getElementById("box4").innerHTML;
    
    if (B4 !== "")
    {
    document.getElementById("box4").innerHTML="";
    }
    else 
    {
    }
    }
    </script>
    
    <style>
    
    
    
    #box1, #box2, #box3, #box4  {width:130px;
    height:130px;
    border:1px solid black;
    float:left;
    position:relative;
    }
    
    #buttons {
    width:528px;
    height:156px;
    border:1px solid black;
    
    }
    
    
    
    
    
    </style>
    
    </head>
    
    <body>
    
    
    <img id="demo" onclick="image1Function();"
    src="http://alastairc.ac/wp-content/uploads/2006/07/minefield-icon.png">
    
    <div id="box1"> </div>
    <div id="box2"> </div>
    <div id="box3"> </div>
    <div id="box4"> </div>
    
    
    <button onclick="box1Function()">1</button>
    <button onclick="box2Function()">2</button>
    <button onclick="box3Function()">3</button><button onclick="box4Function
    
    ()">4</button>
    
    
    
    
    
    
    </body>
    </html>
    This one works fine. Clicking the image loads them properly
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <script type="text/javascript">
    function testImage()
    {
    
    
    var b1=document.getElementById('box1').innerHTML;
    var b2=document.getElementById('box2').innerHTML;
    var b3=document.getElementById('box3').innerHTML;
    
    if (b1 === "")
      {
    document.getElementById('box1').innerHTML='<img 
    
    src="http://www.collaboration133.com/wp-content/uploads/2011/08/wordpress-icon-
    
    128.png">';
      }
    
    else if (b1 !== "" && b2 !== "" && b3 !== "")
    {
    document.getElementById('box4').innerHTML='<img src="http://alastairc.ac/wp-
    
    content/uploads/2006/07/minefield-icon.png">';
    }
    
    else if (b1 !== "" && b2 !== "" )
    {
    document.getElementById('box3').innerHTML='<img 
    
    src="http://www.mouserunner.com/images/WindowsIconPreview_128x128.png">';
    }
    
    else if ("" !== b1)
    {
    document.getElementById('box2').innerHTML='<img src="http://alastairc.ac/wp-
    
    content/uploads/2006/07/minefield-icon.png">';
    }
    
    
    else
      {
      element.src="http://alastairc.ac/wp-content/uploads/2006/07/minefield-icon.png";
      }
    }
    
    function box1Function()
    {
    
    var B1=document.getElementById("box1").innerHTML;
    
    if (B1 !== "")
    {
    document.getElementById("box1").innerHTML="";
    }
    else 
    {
    }
    }
    
    function box2Function()
    {
    
    var B2=document.getElementById("box2").innerHTML;
    
    if (B2 !== "")
    {
    document.getElementById("box2").innerHTML="";
    }
    else 
    {
    }
    }
    
    function box3Function()
    {
    
    var B3=document.getElementById("box3").innerHTML;
    
    if (B3 !== "")
    {
    document.getElementById("box3").innerHTML="";
    }
    else 
    {
    }
    }
    
    function box4Function()
    {
    
    var B4=document.getElementById("box4").innerHTML;
    
    if (B4 !== "")
    {
    document.getElementById("box4").innerHTML="";
    }
    else 
    {
    }
    }
    </script>
    <style>
    #box1, #box2, #box3, #box4 {
    width:130px;
    height:130px;
    border:1px solid black;
    float:left;
    position:relative;
    }
    
    
    #buttons {
    width:528px;
    height:156px;
    border:1px solid black;
    
    }
    
    </style> 
    </head>
    <body>
    
    
    <img id="demo" onclick="testImage()"
    src="http://alastairc.ac/wp-content/uploads/2006/07/minefield-icon.png">
    
    <div id="buttons">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    
    <button onclick="box1Function()" style= width:130px;>Box1</button>
    <button onclick="box2Function()" style= width:128px;>Box2</button>
    <button onclick="box3Function()" style= width:128px;>Box3</button>
    <button onclick="box4Function()" style= width:128px;>Box4</button>
    
    </div>
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh, come on now! That's too obvious for words.

    In the first example, you have
    Code:
    <div id="box1"> </div>
    and in the second example you have
    Code:
    <div id="box1"></div>
    So in the first example, the innerHTML of box1 is a single space, it is *NOT* "" that you are testing for.

    In the second example, there truly is no content, so indeed the innerHTML *is* equal to "".

    If you wanted to say "if the innerHTML is empty except possibly for spaces" you could do
    Code:
    var b1=document.getElementById('box1').innerHTML.replace(/\s/g,"");
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    7Blake (07-24-2013)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Really? Aw thanks bro. It's painfully obvious i'm a the stages before a coding beginner :P

    That was driving me nuts. Completely forgot about space being content in itself. Thanks for the suggestion about using spaces to my advantage aswell.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Actually, no, it wasn't obvious you are a newbie. I thought that other than that the code was fine. Could be simplified a little, but not that it would matter. Glad it helped.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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