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.

try without the line breaks, meaning all the code in one line. — Syfer
– Syfer, Commented Sep 11, 2017 at 0:38
Your quotes are all messed up. Try replacing all of them except the first and last with single quotes. — Software Engineer
– Software Engineer, Commented Sep 11, 2017 at 0:40
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)? — jek
– jek, Commented Sep 11, 2017 at 0:42
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 — Jim Speaker
– Jim Speaker, Commented Sep 11, 2017 at 0:47

adeneo · Accepted Answer · 2017-09-11 00:42:22Z

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>

answered Sep 11, 2017 at 0:42

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

Jason Lemon Over a year ago

Thanks a ton! I appreciate you taking it easy on a beginner!

Amit Sheen · Accepted Answer · 2017-09-11 00:43:19Z

1

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

answered Sep 11, 2017 at 0:43

Amit Sheen

2491 silver badge7 bronze badges

1 Comment

Jason Lemon Over a year ago

Thanks a ton! I appreciate you taking it easy on a beginner!

oliverwebr · Accepted Answer · 2017-09-11 00:48:54Z

0

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>"
  );
};

answered Sep 11, 2017 at 0:48

oliverwebr

6234 silver badges16 bronze badges

1 Comment

Jason Lemon Over a year ago

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

Collectives™ on Stack Overflow

Javascript function call from html

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related