Scribd Logo
Upload

Welcome to Scribd!

  • Randomimage

    Uploaded by

    Tal Rosenberg
    12 views2 pages
    This document contains code for a web page that displays random images. It includes an array of image URLs, a function to select a random image from the array and display it, and buttons to trigger the function. When the button is clicked, a random image is selected, the container is cleared, and the new image is inserted and displayed.

    Original Description:

    basic website code

    Original Title

    Randomimage Copy

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code for a web page that displays random images. It includes an array of image URLs, a function to select a random image from the array and display it, and buttons to trigger the function. When the button is clicked, a random image is selected, the container is cleared, and the new image is inserted and displayed.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    12 views2 pages

    Randomimage

    Uploaded by

    Tal Rosenberg
    This document contains code for a web page that displays random images. It includes an array of image URLs, a function to select a random image from the array and display it, and buttons to trigger the function. When the button is clicked, a random image is selected, the container is cleared, and the new image is inserted and displayed.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Random Images</title>
    <style>
    /* Add some basic styling to the page */
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    }
    img {
    display: block;
    margin: 20px auto;
    max-width: 80%;
    height: auto;
    }
    </style>
    </head>
    <body>
    <h1>Random Images</h1>
    <p>Click the button to display a new random image:</p>
    <button onclick="displayRandomImage()">Show me a random image</button>
    <div id="image-container"></div>

    <script>
    // Define an array of image URLs
    const images = [
    'https://picsum.photos/id/237/300/200',
    'https://picsum.photos/id/238/300/200',
    'https://picsum.photos/id/239/300/200',
    'https://picsum.photos/id/240/300/200',
    'https://picsum.photos/id/241/300/200',
    'https://picsum.photos/id/242/300/200',
    'https://picsum.photos/id/243/300/200',
    'https://picsum.photos/id/244/300/200',
    'https://picsum.photos/id/245/300/200',
    'https://picsum.photos/id/246/300/200'
    ];

    // Define a function to display a random image


    function displayRandomImage() {
    // Get a random index from the images array
    const randomIndex = Math.floor(Math.random() * images.length);

    // Get the URL of the random image


    const imageUrl = images[randomIndex];

    // Create a new image element


    const imageElement = document.createElement('img');

    // Set the source of the image element to the random image URL
    imageElement.src = imageUrl;

    // Clear the previous image, if any


    const imageContainer = document.getElementById('image-
    container');
    imageContainer.innerHTML = '';
    // Add the new image to the page
    imageContainer.appendChild(imageElement);
    }
    </script>
    </body>
    </html>

    You might also like