HTML in JavaScript function basics

Question

Ok, I'm having a huge problem, and I've been looking for days about how to do this. Either I can't read well enough to understand it, or I'm stupid. I'm not sure what it is yet. I'll be honest and say that this is homework, but I've been struggling with this for 3 days now, and as its an online class, I can't go see my instructor and ask him what I'm doing wrong. I have emailed him, but his help is limited and vague, and I cannot figure this out. Anyway, to the point. I want to add HTML to the text that's going to be displayed in a new window using a JavaScript function. Here's the basics of what I have.

function myWindow(){
    var pageContent, pageTitle;
    pageTitle = document.write("Selected Image Preview");
    document.write.style.textAlign="center";
    pageContent = "<html><head><title>";
    pageContent += pageTitle + "</title>";
    pageContent += "<script>alert('The page ' + document.title + ' was created: ' + document.lastModified)</script>";
    pageContent += "<h3>"Name of Image"</h3>";
    pageContent += "</head><body align="center"><strong>" + "<font color= " violet ">"Here is the image you selected. "</font>";
    pageContent += "</strong></body></html>";
}

Now, I have no idea what I'm doing wrong, considering I've read almost everything that I could find, searched all over this site, as well as dozens of others. I've tried the W3 schools, and some site that looked like it was last updated in 2001, and my book has absolutely NO examples of HTML being used inside the function (it's a javascript book, so the HTML help is very limited). Starting at the top, it tells me that "Uncaught SyntaxError: Unexpected token ILLEGAL junk.html:16" on the script line. Then it won't load the rest of the page. If I comment that out, it tells me that '<h3>' is an unexpected identifier, and it just keeps going. There's always something wrong and if I comment out the lines that give errors, then there's nothing left. Please help me figure out what I'm doing wrong. And if it's necessary, I am calling the function onload with the <body onload="myWindow();"> tag.

P.S. Please don't kill me if I've formatted this incorrectly. I did read the directions, and tried to format this as neatly as possible.

"<h3>"Name of Image"</h3>"; this will throw an error as you are unquoteing the string and have text after the string which is illegal syntax. Are you meaning to have Name of Image as part of the html? if so remove the inner quotes — Patrick Evans
– Patrick Evans, Commented Sep 20, 2014 at 3:36
Do not build HTML like this in JS. Instead, write your HTML in an HTML file. Then, insert variable text into the HTML using standard mechanisms like $('#image-name').text(myImageName); if you're using jQuery. — user663031
– user663031, Commented Sep 20, 2014 at 3:45
I'm not using jQuery. We're not that far into the class yet. The assignment is to build the HTML into the new window's text. Trust me, if I could just link to a new document and open it in a new window, that wouldn't be so hard. That's not an option, however. — fallyntalyn
– fallyntalyn, Commented Sep 20, 2014 at 3:49
You are being double-crossed by the closing script tag. See this: stackoverflow.com/questions/8749001/… — Bob Brown
– Bob Brown, Commented Sep 20, 2014 at 4:01
torazaburo is right about how you should do this, and you don't need jQuery. You can use document.getElementById() and the innerHTML property. However, if what you've sketched out is what your instructor wants, well, I guess that's what you have to deliver. {sigh} — Bob Brown
– Bob Brown, Commented Sep 20, 2014 at 4:22

Bob Brown · Accepted Answer · 2014-09-20 04:29:32Z

0

The biggest problem was that the closing </script> tag in the line with the call to alert() terminated the script, even though it was within a string literal. See the link in my comment to your original post. There were some other problems with quotes, and if a teacher is really teaching the <font> tag in 2014, I think I should track him down and throw up in his lap.

Note that the slash in </script> and the embedded double-quotes are now escaped with backslashes. That's the biggest change. Also, the function now returns the computed value so it can be used.

This code goes through a JavaScript console clean. It doesn't open any new windows, and it doesn't deal with the "style" line, which I couldn't figure out.

function myWindow(){
  var pageContent, pageTitle;
  pageTitle = "Selected Image Preview";
//  document.write.style.textAlign="center";  // WTF?
  pageContent = "<html><head><title>";
  pageContent += pageTitle + "</title>";
  pageContent += "<script>alert('The page ' + document.title + ' was created: ' + document.lastModified)<\/script>";
  pageContent += "</head>";
  pageContent += "<body style=\"text-align: center;\">";
  pageContent += "<h3>Name of Image</h3>";
  pageContent += "<strong>" + "<font color= \" violet \">\"Here is the image you selected. \"</font>";
  pageContent += "</strong></body></html>";
  return(pageContent);
}

I've edited the code. The <h3> line was within the head of the document, now fixed, and I added a style attribute to <body> based on your remark about wanting text centered.

edited Sep 20, 2014 at 4:29

answered Sep 20, 2014 at 4:07

Bob Brown

1,5121 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fallyntalyn Over a year ago

I thank you for showing me about the escape characters. I didn't know that it would mess it up like that even in quotes. I've fixed that, but the problem is that I need it to open a new window. It's supposed to take all that pageContent stuff and write it to the new window that I'm opening.

Bob Brown Over a year ago

Tengiz gave you the answer for opening windows, I think. (I haven't tested it.) From his post: var OpenWindow=window.open('#','_blank','width=335,height=330,resizable=1'); OpenWindow.document.write(pageContent); I'm having trouble with newlines in the comments; I hope you get the idea.

Tengiz · Accepted Answer · 2014-09-20 04:17:22Z

-1

Ok, your code contains errors, because you need to learn how to work with strings and quotes and how to escape quotes.

var str1 = "qwe";
var str2 = "asd";

var str3 = str1 + str2;  //  will be qweasd
var str3 = str1 + '1111' + str2; // will be qwe1111asd
var str3 = str1 + 'z"1"' + str2; // will be qwez"1"asd
var str3 = str1 + "z\"1\"" + str2; // will be qwez"1"asd. There is no difference if you use double quotes or single. If you use single quotes, all single quotes in the string must be escaped with backslash and opposite with double quotes

// and the same with single quotes:
var str3 = str1 + 'z\'1\'' + str2; // will be qwez'1'asd

also, you are using document.write function, which overrides the content of current page, but you need a new window, which is why we should use function window.open which returns a new window handler. We save it into OpenWindow variable and then we apply our content using OpenWindow.document.write passing our string pageContent as a first parameter

and the correct code:

function myWindow(){
    var pageContent, pageTitle;
    document.title = "Selected Image Preview";

    document.body.style.textAlign="center";
    pageContent = "<html><head><title>";
    pageContent += pageTitle + "</title>";
    pageContent += "<script>alert('The page ' + document.title + ' was created: ' + document.lastModified)</script>";
    pageContent += "<h3>Name of Image</h3>";
    pageContent += '</head><body align="center"><strong><font color="violet">Here is the image you selected.</font>';
    pageContent += "</strong></body></html>";
    var OpenWindow = window.open('#','_blank','width=335,height=330,resizable=1');
    OpenWindow.document.write(pageContent);
}

edited Sep 20, 2014 at 4:17

answered Sep 20, 2014 at 3:40

Tengiz

1,96014 silver badges12 bronze badges

4 Comments

slebetman Over a year ago

Please explain your answer. Code only answers don't help people understand "What am I doing wrong?" which, if you read the question properly, is really the core of his problem.

slebetman Over a year ago

Note that I didn't down-vote you but if this answer persists with having zero explanations then I'll be inclined to add my downvote.

fallyntalyn Over a year ago

Yours is the closest to working, but it still tells me that at the OpenWindow.document.write(pageContent); it cannot read property "document" of undefined. I kinda got it to work by adding the escape characters that Bob Brown mentioned. But when it opens a window, it opens the same window that is the main document.

Tengiz Over a year ago

that means that your browser is blocking popup windows, it's ok, you just need to allow it. in Chrome it's in the top right corner

Compass · Accepted Answer · 2014-09-20 05:52:52Z

-1

pageContent += "<h3>"Name of Image"</h3>";

You don't need quotes around name of image. The entire line should be treated as a String.

pageContent += "<h3>Name of Image</h3>";

Basically, anything in HTML tags doesn't need quotes unless you intend for quotes to appear.

For this line:

pageContent += "</head><body align="center"><strong>" + "<font color= " violet ">"Here is the image you selected. "</font>";

You should use single quotes.

pageContent += "</head><body align='center'><strong>" + "<font color='violet'>Here is the image you selected. </font>";

You should be able to fix the rest of your HTML, keeping in mind single quotes for attributer, no quotes for content.

As to the HTML itself, it should look like this to follow at least intended standards. You should move most of the styles eventually to CSS.

<html>
    <head>
        <title>Selected Image Preview</title>
        <script>// your script here </script>
    </head>
    <body>
         <div align='center'>
             <!-- your content here -->
         </div>
    </body>

edited Sep 20, 2014 at 5:52

answered Sep 20, 2014 at 3:37

Compass

5,9574 gold badges33 silver badges45 bronze badges

3 Comments

fallyntalyn Over a year ago

Ok, thank you for that, but my text is still not centered. I'm wondering which modifier would be better: The document.body.style.textAlign="center"; or the <body align='center'> ?

Compass Over a year ago

The HTML content should be formatted differently. I'll edit my answer to show you what I would do for HTML display.

fallyntalyn Over a year ago

Thank you, really. But I can't move it to CSS, and as I'm using lame Notepad++ to write this HTML, I can't put it on multiple lines without having the variable at the beginning of every line. I'm downloading dreamweaver now to see if that helps with allowing mulitple lines. I'd really like it to be neatly formatted, but I'm afraid that it's not going to be possible. And I'd kill to be able to bring in css. That would make my life so much easier. :(

Collectives™ on Stack Overflow

HTML in JavaScript function basics

3 Answers 3

2 Comments

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related