Javascript function call from html

Question

I'm doing javascript homework(total newb) and the study guide says...

Add document.write() statements around each line of HTML code (p. 53 gives an example) Be sure to keep the code organized and easy to read. Keep in mind that single (') and double (") quotes must be nested to avoid errors.

I've done that here.

 function displayHeader() {
 document.write("<h1>
 <img src="images/PeteBanner.jpg" alt="Pistol Pete" />
 Jason Lemon's Javascript Website! 
 <img src="images/PeteBanner.jpg" alt="Pistol Pete" /></h1>;
 };

When I go to the header section of the html file...I'm supposed to call the function. I referenced the javascript file in the head section. Here is what I'm putting in the header section. It's not working. I know my code is way off.

• Syfer: try without the line breaks, meaning all the code in one line.
• Software Engineer: Your quotes are all messed up. Try replacing all of them except the first and last with single quotes.
• jek: btw when does the function called? or should i ask if the function should be executed upon page loaded or upon user interaction(ex. click)?
• Jim Speaker: Both answers (Amit.Sh and adeneo) below are correct. The latter answer more readable. @Adeneo is also correct in that document.write should be avoided but given that it is the assignment, ok. Cheers

Answer 1

It should look more like this ...

function displayHeader() {
 document.write(
 '<h1>' +
 '<img src="images/PeteBanner.jpg" alt="Pistol Pete" />' +
 'Jason Lemon\'s Javascript Website!' +
 '<img src="images/PeteBanner.jpg" alt="Pistol Pete" />' +
 '</h1>';
 )
}

... but using document.write is generally bad practice, but if that's what the assigment says, I guess it's okay, just know that you shouldn't be using it.

To call the function after you've included the script in your HTML, you can do

<script type="text/javascript">
 displayHeader()
</script>

• Jason Lemon: Thanks a ton! I appreciate you taking it easy on a beginner!

Answer 2

Use one line.

function displayHeader() {
 document.write('<h1><img src="images/PeteBanner.jpg" alt="Pistol Pete" />Jason Lemon\'s Javascript Website! <img src="images/PeteBanner.jpg" alt="Pistol Pete" /></h1>')
};

• Jason Lemon: Thanks a ton! I appreciate you taking it easy on a beginner!

Answer 3

You need to concat the strings or write all in one line. Like this it would look like if you concatenate the strings.

function displayHeader() {
 document.write(
 "<h1> "
 + "<img src = 'images/PeteBanner.jpg' alt = 'Pistol Pete' / >"
 + "Jason Lemon 's Javascript Website!" 
 + "<img src = 'images/PeteBanner.jpg' alt = 'Pistol Pete' / > </h1>"
 );
};

• Jason Lemon: in that same file...when I add another function to display nav...the header dissapears.