Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Question

Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Just starting out with JavaScript and working on a simple project. My goal is to have the background image of an HTML document change to a random picture from a directory named 'Background' every time the page is opened.

function main()
{
    // Creates a list of filenames from the 'Background/' dir and gets a 
    // random index in the list
    var fs = require('fs');
    var fileList = fs.readdirSync('/Background/');
    var len = fileList.length;
    var index = Math.floor(Math.random() * len);

    var filePath = "Background/" + fileList[index];

    document.body.style.backgroundImage = "url(filePath)";
    document.body.style.backgroundSize = "cover"
}

$(document).ready(main);

However, I'm running into issues as the code doesn't seem to work as intended. I suspect my misunderstanding lies within how the URL class functions. When I manually specify a specific image path like this:

document.body.style.backgroundImage = "url('Background/green.jpg')";

The background image changes successfully, but it's not working with randomly retrieving filenames. It seems to be a language-related error that I can't quite wrap my head around. Any help would be greatly appreciated. Thanks!

javascript html css file background

Answer 1

Answer №1

When working with the browser, using fs is not allowed in this manner. Instead, you should store paths to images. These paths can be stored in a database or an array within your javascript file. Here's an example of storing filenames in an array:

function main()
{
    var images = ['image1.jpeg', 'image2.jpg', 'bg.png'] //storing only names
    var index = Math.floor(Math.random() * images.length)
    var filePath = "Background/" + images[index]; //creating full path
    document.body.style.background = 'url("'+filePath+'")'
    // if background-size is not changing, it's better to store it in .css file
}

$(document).ready(main);

Answer 2

When working with the browser, using fs is not allowed in this manner. Instead, you should store paths to images. These paths can be stored in a database or an array within your javascript file. Here's an example of storing filenames in an array:

function main()
{
    var images = ['image1.jpeg', 'image2.jpg', 'bg.png'] //storing only names
    var index = Math.floor(Math.random() * images.length)
    var filePath = "Background/" + images[index]; //creating full path
    document.body.style.background = 'url("'+filePath+'")'
    // if background-size is not changing, it's better to store it in .css file
}

$(document).ready(main);

Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Answer №1

Similar questions

Using Selenium and Python to download audio files that require JavaScript to load

Why is the AJAX request not functioning properly after using jQuery's hide method?

Is PHP loaded prior to the `html body`?

The Controller received a JSON object that was empty

What is the best way to incorporate multiple countdown timers on a single HTML page?

When utilizing a prisma query with a callback function, it appears that try/catch blocks are being overlooked in Node.js

The md-autocomplete feature showcases search results in a list format rather than a dropdown menu

Invoke a method in an Angular 2 component using an HTML event

Are you curious about the array of elements in React's carousel?

The challenge of maintaining consistency in Vue 3 when it comes to communication between

Using Angular Ionic 3 to apply the disabled attribute

Identify the position of a mouse click event when dots overlap

Guide on how to organize a list into three columns using a single ul tag

Content missing after centered banner

When you hover over an image, its opacity will change and text will overlay

Ensure that a div element expands to 100% of its parent's height when its child's height is less than 100%

Issue encountered while trying to implement a recursive function for mapping through nested elements was not producing the

Add a 'tag a' directly following 'img'

Create a PDF document using the combined HTML content

Troubleshooting a Node.js problem with variable scope