CODEWITHSUNDEEP
javascripthtml
marvin
marvin

Reputation: 43

JS - Document.Write issue

I'm trying to use the document.write options for a website to set the recurring header that appears on every other site. Unfortunately I'm stuck with an error cause I cant set the background-image, because it gives me an parsing error.

document.write('<div style="background-image: url('images/index/1ApBer2016.JPG'); background-repeat: no-repeat; background-size: cover;" class="header">\<h1>XXX<br> XXX</h1>\
</div>\'
          );

I'm thinking it's because of the quotation marks for the image itself, but I can't seem to fix it. Do you guys have any help?

Upvotes: 0

Views: 105

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

Use ES6 back-tics `. You no longer to espace any character and code looks clean and readable as well.

document.write(`<div style="background-image: url('https://picsum.photos/200/300'); background-repeat: no-repeat; background-size: cover;" class="header"><h1>XXX<br> XXX</h1>
</div>`);

DEMO:

document.write(`<div style="background-image: url('https://picsum.photos/200/300'); background-repeat: no-repeat; background-size: cover;" class="header"><h1>XXX<br> XXX</h1>
</div>`);

Upvotes: 1

Sudhanshu Kumar
Sudhanshu Kumar

Reputation: 2044

Escape the quotes as in the code below, using the escape character "\"

document.write('<div style="background-image: url(\'images/index/1ApBer2016.JPG\'); background-repeat: no-repeat; background-size: cover;" class="header"><h1>XXX<br> XXX</h1></div>');

Upvotes: 1

Related Questions