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 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JS working in Firefox but not IE using if (document.getElementById

    I'm working on my own site for layouts for sites like Myspace and Ning.
    Myspace changed their layouts to no longer include CSS so I am working on a new way to post their layouts.

    I used this same method to post all our other layouts.
    For some reason this is not showing up in IE.

    Firefox:


    IE:


    Interestingly enough, when I run the debugger in IE it loads when it is done.
    If not I get the black hole effect above.

    ERRORS:
    Object required
    Not implemented

    Any help will be greatly appreciated!

    Code:
    bgImg = document.getElementById('bg').innerHTML;
    tile = document.getElementById('bgtile').innerHTML;
    att = document.getElementById('bgatt').innerHTML;
    pos = document.getElementById('bgpos').innerHTML;
    top = document.getElementById('mar').innerHTML;
    ht = document.getElementById('marht').innerHTML;
    alink = document.getElementById('sel').innerHTML;
    col = document.getElementById('bgcol').innerHTML;
    hed = document.getElementById('hdr').innerHTML;
    bord = document.getElementById('bdr').innerHTML;
    con = document.getElementById('ct').innerHTML;
    div3 = document.getElementById('MS3css').innerHTML;
    
    
    if (document.getElementById('bg')){
    document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ><img src="'+bgImg+'"></textarea><br />';}
    if (document.getElementById('bgtile')){
    document.getElementById('bgtileEmpty').innerHTML='Background Tile: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+tile+'</textarea><br />';}
    if (document.getElementById('bgatt')){
    document.getElementById('bgattEmpty').innerHTML='Background Attachment: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+att+'</textarea><br />';}
    if (document.getElementById('bgpos')){
    document.getElementById('bgposEmpty').innerHTML='Background Position: <br /><textarea id="MS3" style="width: 250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+pos+'</textarea><br />';}
    if (document.getElementById('mar')){
    document.getElementById('marEmpty').innerHTML='Marquee: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"><a href="http://skemaholicsanonymous.com/"><img src="'+top+'"></a></textarea><br />';}
    if (document.getElementById('marht')){
    document.getElementById('marhtEmpty').innerHTML='Marquee Height: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+ht+'</textarea><br />';}
    if (document.getElementById('sel')){
    document.getElementById('selEmpty').innerHTML='Selected: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+alink+'</textarea><br />';}
    if (document.getElementById('bgcol')){
    document.getElementById('bgcolEmpty').innerHTML='Background Color: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+col+'</textarea><br />';}
    if (document.getElementById('hdr')){
    document.getElementById('hdrEmpty').innerHTML='Header: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+hed+'</textarea><br />';}
    if (document.getElementById('bdr')){
    document.getElementById('bdrEmpty').innerHTML='Borders: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+bord+'</textarea><br />';}
    if (document.getElementById('ct')){
    document.getElementById('ctEmpty').innerHTML='Content: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+con+'</textarea><br />';}
    
    if (document.getElementById('MS3css')){
    document.getElementById('code2Empty').innerHTML='<form id="genDone"action="http://blog.skemaholicsanonymous.com/MSPreview3/preview.php" method="post" target="_blank"><textarea id="codebox"  style="display: none;" name="genCode">'+div3+'</textarea><br /><input type="submit" value="Preview" id="prevLoad" /></form>';}

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    var bgImg = window.document.getElementById('bg').innerHTML;

    might work. IE can balk at some pretty trivial omissions. You can put a couple of alerts in to see what is not working.

  • Users who have thanked DrDOS for this post:

    AnGella (11-18-2010)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    var bgImg = window.document.getElementById('bg').innerHTML;

    might work. IE can balk at some pretty trivial omissions. You can put a couple of alerts in to see what is not working.
    *palmFace*

    That fixed it.
    You have just saved me from my own sloppy Javascript!

    Thank You!
    Thank You!
    Last edited by AnGella; 11-18-2010 at 12:50 AM. Reason: typo

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You don't need those if (document.getElementById('bg')) conditions as you already accessed it previous to that here --> bgImg = document.getElementById('bg').innerHTML;

    If those ids don't exist, it would have thrown that error even before it gets to those if conditions.

    If there really has the chance that those ids won't exist, you have to put the check at the start.

    Code:
    var bgImg = (document.getElementById('bg')) ? document.getElementById('bg').innerHTML : "";
    var tile = (document.getElementById('bgtile')) ? document.getElementById('bgtile').innerHTML : "";
    ...
    if (bgImg){
        document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ><img src="'+bgImg+'"></textarea><br />';
    }
    if (tile){
         document.getElementById('bgtileEmpty').innerHTML='Background Tile: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+tile+'</textarea><br />';
    }
    ...
    Otherwise, make the code simpler and remove those checks.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    AnGella (11-18-2010)

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    You don't need those if (document.getElementById('bg')) conditions as you already accessed it previous to that here --> bgImg = document.getElementById('bg').innerHTML;

    If those ids don't exist, it would have thrown that error even before it gets to those if conditions.

    If there really has the chance that those ids won't exist, you have to put the check at the start.

    Code:
    var bgImg = (document.getElementById('bg')) ? document.getElementById('bg').innerHTML : "";
    var tile = (document.getElementById('bgtile')) ? document.getElementById('bgtile').innerHTML : "";
    ...
    if (bgImg){
        document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ><img src="'+bgImg+'"></textarea><br />';
    }
    if (tile){
         document.getElementById('bgtileEmpty').innerHTML='Background Tile: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+tile+'</textarea><br />';
    }
    ...
    Otherwise, make the code simpler and remove those checks.
    I have never used this
    Code:
    ? document.getElementById('bg').innerHTML : "";
    in my limited Javascript experience.
    Can you please explain what the ? and the
    Code:
    : "";
    do?

    I still have some work to do on this.
    I am trying to tell it that if bgImg is blank it should display something else.


    Thanks for trying to help me simplify!

  • #6
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Ternary operator. It boils down to:

    (this == true) ? [this code or value is used] : [else this is used if false];
    Last edited by MattF; 11-18-2010 at 03:37 AM.

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Well glengv isn't here right now so I'll tell you what it does. It's just another version of the if statement that covers two choices, and often simplifies coding.
    (condition) ? if condition is true do this : if condition is false do this ;

    Condition can be any boolean statement or existence statement.

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by MattF View Post
    Ternary operator. It boils down to:

    (this == true) ? [this code or value is used] : [else this is used if false];
    So then:

    Code:
    if (document.getElementById('bg')){
    document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ><img src="'+bgImg+'"></textarea><br />';}
    Would change to this:

    Code:
    (var bg == true) ? [<textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ><img src="'+bgImg+'"></textarea><br />] : [<textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ></textarea><br />];
    The variable bg may be there but be left blank.
    If it is left blank I want the textarea to be empty.
    If there is a value in the variable bg then I want it to put the info into it's HTML in the textarea.

    I hope that makes sense.

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Well glengv isn't here right now so I'll tell you what it does. It's just another version of the if statement that covers two choices, and often simplifies coding.
    (condition) ? if condition is true do this : if condition is false do this ;

    Condition can be any boolean statement or existence statement.
    So this would be useful for

    if bg is blank do this,
    if bg has a value do this?

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    If you want the textarea to be empty when bg is blank, you can remove the if conditions.

    Code:
    var bgImg = (document.getElementById('bg')) ? document.getElementById('bg').innerHTML : "";
    var tile = (document.getElementById('bgtile')) ? document.getElementById('bgtile').innerHTML : "";
    ...
    ...
    
    //bg
    document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ><img src="'+bgImg+'"></textarea><br />';
    
    //tile
    document.getElementById('bgtileEmpty').innerHTML='Background Tile: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+tile+'</textarea><br />';
    Wait...why do you have <img> tag inside <textarea> tag? You can't put any html tag inside textarea.
    Last edited by glenngv; 11-18-2010 at 03:59 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    The [] in my example are there just to enclose the example blocks. They don't go in the actual code. For lengthy things like that, stick with the if/else format. The ternary is merely generally used for short expressions where it's simpler and neater. For example, (and this code isn't intended to be syntax perfect):

    Code:
    doc.textarea.value = ((text != '' || text != undefined) ? text : 'default entry text');
    whereas if you're going for something convoluted, long or where you want several options processing/setting on true/false status, stick with the if/else format. Ternaries can be hard to follow/distinguish for anything above simple, short code.

  • #12
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    I just said the same thing MattE did, but with different wording.
    Code:
    var bgImg = window.document.getElementById('bg').innerHTML;
     (bgImg){
        document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ><img src="'+bgImg+'"></textarea><br />';} :  {document.getElementById('bgimgEmpty').innerHTML='';} ;

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    AnGella said that if the variable is empty, the textarea should be empty also. So there is always a textarea no matter what.

    The variable bg may be there but be left blank.
    If it is left blank I want the textarea to be empty.
    If there is a value in the variable bg then I want it to put the info into it's HTML in the textarea.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #14
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    If you want the textarea to be empty when bg is blank, you can remove the if conditions.

    Wait...why do you have <img> tag inside <textarea> tag? You can't put any html tag inside textarea.
    I have the <img> tag inside the textarea so the user can copy the HTML for the image and the html doesn't just display the image.

    So if there is no image submitted I want it to display the textarea blank(No <img> tag).
    If an image is submitted, I'd like the direct link to plug into the <img> tag in the textarea.

  • #15
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    AnGella said that if the variable is empty, the textarea should be empty also. So there is always a textarea no matter what.
    Yes.
    There is no isset in javascript. lol

    Is what I want to do possible?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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