Background image generator I created won't generate any of the images when I click a button

When I click my button , a random image that I put in my array is supposed to be generated as the background image for my webpage page. My array contains a group of objects, an object that stores the name of the album and the image link to all of the images for the album. The links for the album images work , because I copied and pasted the links of the image in the web address bar and the image is displayed.

When I click the button, I want the image that is supposed to be generated to cover the entire page as well.
When I click my button, no image is generated.

What am I doing wrong? My link is listed below:

Update: I got my button to generate random images, but those images that are generated don’t covere the whole page. What do I do to change that dillemma?

you are changing an image element, it will not be the background image on its own, you need to use the code to set the image as backgronud.
instead I think you want to set the image as background image for the page body

something like explained here, maybe?
https://www.w3schools.com/jsref/prop_style_backgroundimage.asp

Thanks that worked. Is there a way to scale back the image without changing the size of the image? My background images kind of look a little too blurry.https://codepen.io/noblegas/pen/bGdYvvQ

if you do some research on the backround rule I think you will find something to do what you want. I have not much used it.

Okay . So you are saying that such a feature in javascript/css that makes the image less blurrry exist?

nothing makes image less blurry, if the current size exceed the original size. But you can find a way to make sure that the image retains original size, be that as single image, or repeated multiple times to fill all the space.