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.
Page 2 of 2 FirstFirst 12
Results 16 to 25 of 25
  1. #16
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    No, whether a variable has function scope or global scope has nothing to do with my comments about what happens when you use = inside an if. It will be "permanent" if it's a global variable, function scope only if not.

    Yes, it's safer to put the constant (whether number or string) first in *ANY* comparison, just to make sure it *IS* a comparison.
    Code:
    if ( x = "zamboni") ...
    causes no error, but assigns "zamboni" to the variable x which is surely not what you intended.
    Code:
    if ( "zamboni" = x ) ...
    won't even compile, much less run. So you get a syntax error. (HOPEFULLY you are using your JavaScript debugger when writing code, so you will immediately see the syntax error.
    Code:
    if ( "zamboni" == x )
    and
    if ( x == "zamboni" )
    will of course both work, but by using the first form, you avoid logic errors when you goof and accidentally use = instead.
    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.

  2. #17
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    [quote]how does javascript read <div id="test"></div> ? [/code]
    Same as it changes the contents:
    Code:
    if ( document.getElementById("test").innerHTML == "" ) 
    {
        ... no content ...
    } else {
        ... content ...
    }
    Or, if you follow my prior suggestion:
    Code:
    if ( "" == document.getElementById("test").innerHTML ) 
    {
        ... no content ...
    } else {
        ... content ...
    }
    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.

  3. Users who have thanked Old Pedant for this post:

    7Blake (06-09-2013)

  4. #18
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I could kiss you Thanks, I appriciate that. I was wasting so much time with trial and error. I was going from the inital "if" and putting an image in a div, then on the else if trying to get the .src.match to work against the image that was put there from the first if. Wasn't working at all. Atleast now I can use !== and == alternatively. Though I am confused about the .src.match not working on the second run through of the function. Either I'm writing something wrong, or perhaps I'm not understanding how javascript runs through each script and what becomes permenant and what disappears. Though I would assume if a function writes something to the page in its first run through, on the second run through it reads that new content and adjusts accordingly. I can get it to work with numbers and strings but not images :S


    Thanks btw, you guys have been a tremendous help. Hope it's not a bother to keep asking questions.

  5. #19
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Show me what you tried for src.match

    You need to be aware that the browser does *NOT* retain the img.src that you gave it.

    If you give it just img.src = "images/xyz.jpg", when you got to read it back it will be something like http://www.yoursite.com/images/xyz.jpg.

    However...src.match *probably* should then work, but let's see your code.
    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.

  6. #20
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <script>
    function testImage()
    {
    element=document.getElementById('demo');
    var x=document.getElementById('test2');
    if (element.src.match("minefield-icon"))
      {
      element.src="http://www.collaboration133.com/wp-content/uploads/2011/08/wordpress-icon-128.png";
      }
    
    
    
    else if (element.src.match("wordpress-icon-128"))
    {
    document.getElementById('test2').innerHTML="test";
    }
    
    else
      {
      element.src="http://alastairc.ac/wp-content/uploads/2006/07/minefield-icon.png";
      }
    }
    </script>
    
    <img id="demo" onclick="testImage()"
    src="http://alastairc.ac/wp-content/uploads/2006/07/minefield-icon.png">
    <p id="test2"></p>
    
    </body>
    </html>

    Ok. I think I got it to work sorta. This works, when I update the image, it reads it on the else if and initiates the new string being written.

    But when I try to add a new else if it doesn't read it. Is there a conflict with the two else/if because they share a same match statement?
    Code:
    else if 
    (element.src.match("wordpress-icon-128") && x == "test")
    
    {
    document.getElementById('test2').innerHTML="testf2";
    }
    I know you said the browser does not retain the image, but it works doing it this way. So I'm assuming that it writes the image coding into the browser and when I intiate the function again it scans the new image that was written into it? Or is there a problem with my usage of && and the ".src.match("") ?
    Last edited by 7Blake; 06-09-2013 at 07:18 PM.

  7. #21
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    This doesn't make sense:
    Code:
    else if (element.src.match("wordpress-icon-128") && x == "test")
    How/when/where would the variable x *EVER* be set to the value test in your code???

    The only place you set x to anything is here:
    Code:
    var x=document.getElementById('test2');
    and that sets x to an object reference. No way it would possibly be a *string*!
    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.

  8. Users who have thanked Old Pedant for this post:

    7Blake (06-09-2013)

  9. #22
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Ah right I see. I didn't set it so that x was calling the HTML in the "test2" element.
    Should have been x = document.getElementById('test2').innerHTML;

  10. #23
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Ahh...I didn't even realize that was what you were after.
    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.

  11. #24
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Yar sorry, I'll get better at explaining what I'm trying to do. Just a language barrier atm :P

    I'll post what I'm using this for when I figure out how exactly I want to implement it properly. Right now I was trying to get the understanding and hand of variable assignment and loading/reading changes in HTML containers. Hopefully I run into a few more walls though :P I really appricate the bounce backs.

  12. #25
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #box1, #box2, #box3, #box4 {
    width:130px;
    height:130px;
    border:1px solid black;
    float:left;
    }
    
    
    #buttons {
    width:528px;
    height:156px;
    border:1px solid black;
    
    }
    
    </style> 
    </head>
    <body>
    <script>
    function testImage()
    {
    element=document.getElementById('demo');
    var x=document.getElementById('test2');
    
    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>
    
    <img id="demo" onclick="testImage()"
    src="http://alastairc.ac/wp-content/uploads/2006/07/minefield-icon.png">
    <p id="test2"></p>
    <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>
    I know it's pretty basic, but it's a step that's working atleast :P I'm not sure if it's ok, but it works right. I'm twirling with the idea I can merge some functions together, or something to that degree. It's long winded code, so I'm hoping there's a form of writing that will make it short. The next thing I want to learn is how to assign it so if "box1" is full that the new content will be sent to the next available box, as opposed to restricted content per box. I suppose that's the dynamic aspect but yeah.
    Last edited by 7Blake; 06-10-2013 at 12:47 AM. Reason: code was too messy


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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