Changing background images with JavaScript

Question

I'm fairly new to JavaScript and HTML and I can't seem to figure out want is wrong. This is part of an assignment I have for class so the structure/code is formatted the same way as an example the professor provided.

I'm trying to rotate between different background images.

This is what I have for the script:

   var bakground = [];
    background[0] = new Image();
    background[0].src = "Images/blue.jpg";
    background[1] = new Image();
    background[1].src = "Images/chalkboard_web.jpg";
    background[2] = new Image();
    background[2].src = "Images/computer-scince-education.jpg";
    background[3] = new Image();
    background[3].src = "Images/universidad.jpg";

    var i = 0;
    var temp = new Image();
    function wallpaper()
    {
        temp = background[i].src;
        i++;
        if(i == background.length)
            i = 0;

        document.body.background = 'temp';
        return false;
    }

This is where I'm calling the function:

<P/> <b> test changing document body background:</b>

<INPUT TYPE="button" NAME="button2" value="set background to an image"
   onClick="wallpaper()" >
</P>

document.body.background = 'temp'; seems wrong. you are setting background to a string, and not the temp image. try document.body.background = temp; — Joel
– Joel, Commented Nov 6, 2020 at 0:27
Hello there, welcome to Stack Overflow! When you set "temp" to the background attribute, you should see an entry in the network tab as /temp:1 GET https://example.com/temp 404. Can you see this in your dev tools? — rxgx
– rxgx, Commented Nov 6, 2020 at 0:52

Corentin THOMAS · Accepted Answer · 2020-11-06 00:29:44Z

3

You are not using the "temp" variable you defined above but a string instead!

    function wallpaper()
    {
        temp = background[i].src;
        i++;
        if(i == background.length)
            i = 0;

        document.body.background = temp;
        return false;
    }

Should work

answered Nov 6, 2020 at 0:29

Corentin THOMAS

461 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

passcooall Over a year ago

Hey, thank you for the help! you were right about not using the 'temp' variable correctly but even after the change it still isn't working

Joel Over a year ago

because you have a typo, see my answer. background is misspelled. Also, always look into the developer console of your browser

Joel · Accepted Answer · 2020-11-06 01:07:52Z

2

There are several things.

Bugs:

type in background
you are setting document.body.background to the string 'temp' and not to your image.
you are using a closing p-tag to open the paragraph. Should be <p> instead of </P>

Other improvements:

you don't even need to create new Image(), the string of where to get the image should suffice.
you don't need to have temp as a global variable.
you can more easily modulo the iterator rather then re-setting it to 0
tags and attributes are case insensitive. It's common to use lowercase, though.
elements like input can / should have closing tags or be self-closing. See example here:

   <html>
        <head>
        <script>
        var background = [
                "https://source.unsplash.com/random",
                "Images/wall.jpg",
                "Images/1road.jpg"
            ];
        var i = 0;
        function wallpaper() {
            document.body.background = background[i++];
            i = i % background.length; // will wrap around the length. look up 'modulo' unsure
            return false;
        }
        </script>
        </head>
        <body>
            <p/>
                <b> test changing document body background:</b>
                <input type="button" name="button2" value="set background to an image"
                    onClick="wallpaper()" />
            </p>
        </body>
    </html>

edited Nov 6, 2020 at 1:07

answered Nov 6, 2020 at 0:34

Joel

1,8633 gold badges17 silver badges37 bronze badges

2 Comments

passcooall Over a year ago

Thank you so much! i feel stupid for not noticing that typo before!

Joel Over a year ago

Yes, console tells you, that it cannot find background when it tries to access it. Also, if that works for you now, please accept this as the answer. Will help other people in the future.

Collectives™ on Stack Overflow

Changing background images with JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related