How do you toggle the background image of a html page using JavaScript and a button from HTML?

Question

I want to switch from one image to another and then back. I don't want to use an ID or a class or jQuery (I know it's easier). Just the body element and "getElementsByTagName". Body element in CSS has a background image and I would like to create a button where when clicked, it goes from image 1 (default) to image 2 then if you want, you can click to turn back to image 1. I do believe a function needs to be made. Can anyone help me with this please. I have the button already linked with the function but the actual function, I just don't know, I've tried but nothing seems to work. Thanks.
https://code.sololearn.com/WlVxrfI4GGSs/?ref=app

Answer 1

Mr.Robot Instead of one variable for each image, you can have one which tells which image to show. Then, the function just toggles this variable and sets background image from it.
SoloLearn code playground automatically links HTML, CSS and JavaScript files. Elsewhere, you have to link them in HTML file's head section.

Answer 2

I would recommend using background-color along with background-image, this is in case the image does not load (for example, I do not see anything other than a white screen and a button).

CSS:
background-color: red;
background-image: url("https://cdn.wallpapersafari.com/84/22/Jz6bAs.gif");

JS:
document.body.style = "background-color: green; background-image: url('https://wallpapercave.com/wp/wp2864012.gif')";

And there is no point in comparing a boolean variable, this is enough:
if (isImg1) {...}

If you have to switch many images, then you really need the same number of boolean variables, but if you switch between two images, then you only need one variable , the value of which you will change.

Switches can also be done with CSS: https://code.sololearn.com/Wtnu13B8dPEC/?ref=app

Answer 3

Link your code from code playground into the question - edit it and use + button. This way, we can check, test, and point solutions.
BTW, yes, you'll have to write a JS function, called by your button "onclick" attribute.

Answer 4

Done. Sorry if the code is very messy, practicing daily to minimise. Also, this was all on pc so I've had to transfer it

Answer 5

Solomoni Railoa , prefer giving conceptual hints instead of finished code. This way, posters will learn better.

Answer 6

Mr.Robot You have to toggle the variable(s) that define which image to show.
Hint: you don't need two variables.

Answer 7

Thank you so much for this. How would I do it without 2 variables then? It works on Sololearn but not on my pc which is weird. I've literally typed out the same code and have triple checked for any errors but nothing. Img 1 is default. I click the button, img 2 appears but when I click again, a white background appears, all buttons are still there, if I click again, Img 2 appears again and then a cycle is created because it goes back to a white background. Any help with this?

Answer 8

I'll be working on the one variable method from now I guess. I changed it from link to imagename.gif and it worked. Thanks for the help again🤝. Appreciate it.