CODEWITHSUNDEEP
javascripthtml
passcooall
passcooall

Reputation: 1

Changing background images with JavaScript

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>

Upvotes: 0

Views: 50

Answers (2)

Joel
Joel

Reputation: 1833

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>

Upvotes: 2

Corentin THOMAS
Corentin THOMAS

Reputation: 31

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

Upvotes: 3

Related Questions