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

AnGella

11-17-2010, 10:22 PM

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:
http://i286.photobucket.com/albums/ll88/AnGella_/AnGellaDesigns/Tuts/MS3h.png

IE:
http://i286.photobucket.com/albums/ll88/AnGella_/AnGellaDesigns/Tuts/MS3preview.jpg

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!

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>';}

DrDOS

11-17-2010, 10:34 PM

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.

AnGella

11-17-2010, 11:50 PM

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!

glenngv

11-18-2010, 12:02 AM

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.

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.

AnGella

11-18-2010, 02:22 AM

MattF

11-18-2010, 02:33 AM

Ternary operator. It boils down to:

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

DrDOS

11-18-2010, 02:42 AM

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.

AnGella

11-18-2010, 02:46 AM

Ternary operator. It boils down to:

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

So then:

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:

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

AnGella

11-18-2010, 02:49 AM

glenngv

11-18-2010, 02:55 AM

If you want the textarea to be empty when bg is blank, you can remove the if conditions.

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.

MattF

11-18-2010, 02:55 AM

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

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.

DrDOS

11-18-2010, 03:05 AM

I just said the same thing MattE did, but with different wording.

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='';} ;

glenngv

11-18-2010, 03:08 AM

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.

AnGella

11-18-2010, 03:11 AM

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.

AnGella

11-18-2010, 03:20 AM

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?

MattF

11-18-2010, 03:24 AM

Why is the textarea being generated via JS anyhow? It's merely the content you should be altering. Generate the textarea using the page output scripting language.

AnGella

11-18-2010, 03:38 AM

Why is the textarea being generated via JS anyhow? It's merely the content you should be altering. Generate the textarea using the page output scripting language.

This is a Wordpress thing.
Unfortunately the only way I was able to accomplish what I needed was to add the textareas via javascript.

It worked til now.

glenngv

11-18-2010, 03:40 AM

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.
Then you should HTML encode the img tag to make it rendered literally as text.

function htmlEncode(str){
if (!str) return "";
return str.replace(/\</g, '<').replace(/\>/g, '>').replace(/\"/g, '"');
}

Then call htmlEncode() function as needed.

var bgImg = "";
if (document.getElementById('bg')){
bgImg = htmlEncode('<img src="'+document.getElementById('bg').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()" >' + bgImg + '</textarea><br />';
...

AnGella

11-18-2010, 03:53 AM

Thanks, I will go give that a try.

Here is a post that demonstrates my issue:
http://blog.skemaholicsanonymous.com/love-my-space-3-0/

Under Marquee: it is showing the HTML for the linked marquee image although there is no direct link for an image. I want this to display blank since the author didn't put in a value in their form.

AnGella

11-18-2010, 04:12 AM

Then you should HTML encode the img tag to make it rendered literally as text.

function htmlEncode(str){
if (!str) return "";
return str.replace(/\</g, '<').replace(/\>/g, '>').replace(/\"/g, '"');
}

Then call htmlEncode() function as needed.

var bgImg = "";
if (document.getElementById('bg')){
bgImg = htmlEncode('<img src="'+document.getElementById('bg').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()" >' + bgImg + '</textarea><br />';
...

I am in over my head. lol
var bgImg = ""; ----->Is this representing a blank bg?
if (document.getElementById('bg')){
bgImg = htmlEncode('<img src="'+document.getElementById('bg').innerHTML + '" />');
}
...
...
//bg ---------->Is this not being implemented?
document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >' + bgImg + '</textarea><br />';
...

glenngv

11-18-2010, 04:42 AM

1. Yes
2. // signifies a one-line comment in JavaScript. It's just a comment, it means nothing.