Question:
I’ve recently been learning JavaScript, and I’ve been testing out the JS function window.print(), although when the save menu comes up the image I’ve set with document.getElementById("myImage").style.backgroundImage = "url('backgrounds/space.png')"; doesn’t show up, or when I save it. Is this a Javascript feature or a bug on my end?
Repl link:
https://replit.com/@JohnnySuriano/Character-Styler-JS#index.html
code snippet
https://replit.com/@JohnnySuriano/Character-Styler-JS#index.html
I recommend you put the code in the script.js file and put <script src="script.js"></script> in your index.html file.
And is it supposed to print the buttons?
1 Like
Not really I’m just new to JS and window.print() is easy
1 Like
I’ve looked at the code and I don’t think there’s supposed to be an error.
But I found this when I went into your website and went in the console:
Weird, I haven’t got that error when I’ve run it before
That error wasn’t in Replit, it was in the browser
That’s because there’s no favicon, the “logo” of the website. Not a real error, it will just display the default one in different browsers. If OP ever decided to change that and add theirs, I recommend https://realfavicongenerator.net/
1 Like
It works for me, using Chrome 114.0.5735.124 on iPad OS. What browser are you running,on what OS and what version is it?
nevertheless, it’d be better for data usage to avoid having the browser send the request
<link rel=icon href=data:>
‘background’ suggests that an image is for decoration and shouldn’t be printed or given importance by, e.g. screen readers.
You’ll need to put the#myImage in a div, then create an img before it for the background, and position the background behind the #myImage, and in the script, set the src of that img to the background image.
you could probably improve the CSS, but I’ve got it working here.
where bg is the id of the second img element:
:has(>#bg) {
position: relative
}
#myImage {
position: absolute;
top: 0;
left: 0
}
2 Likes
This is to do with the way printing works, if you click More settings (in the print menu) and scroll down, you should see an option with a checkbox, called Background graphics, enable that and the background will appear.
To force the background to appear, you could instead make it an image element and put it behind the second image so it doesn’t count as background graphics.
2 Likes
Is that setting on replit or the print menu?
