CODEWITHSUNDEEP
javascriptimageimagesource
Ayo
Ayo

Reputation: 19

Use JS to change the source of an image element after loading the image?

Is it possible to use JS (specifically with the p5 library) to change the source of an image element? I was trying to make a very low-level slideshow on my webpage and I thought I could just do something like this (the code is also in the picture below):

let slide;
function setup() {
    let sliders = ['cap_1.jpg', 'cap_2.jpg', 'spidermen.jpg'];
    let i = 0;
    slide = createImg(sliders[0], 'An image of Steve Rogers');
    slide.parent('container');
    slide.class('images');
    setInterval(changeImg, 2000);
    
} 

const changeImg = () => {
    slide.src = (sliders[1])
}

Upvotes: 1

Views: 65

Answers (2)

vanowm
vanowm

Reputation: 10221

There are a few issues:

  1. in your changeImg() you are only using index 1 from the array, it never advances to the next image.
  2. because changeImg() is in different scope from setup(), it won't have access to variables created inside setup() function, so neither sliders nor i are accessible.
  3. Once the slideshow started, there is no way to stop it.

function setup() {
    let sliders = ['https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj', 'https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w102-h68-n-l50-sg-rj', 'https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w76-h102-n-l50-sg-rj'];
    let i = 0;
/*
    let slide = createImg(sliders[0], 'An image of Steve Rogers');
    slide.parent('container');
    slide.class('images');
*/
    let slide = document.createElement("img");
    slide.src = sliders[0];
    slide.title = 'An image of Steve Rogers';
    slide.className = "images";
    document.body.appendChild(slide);
    const changeImg = () => {
        slide.src = sliders[++i % sliders.length];
    }
    return setInterval(changeImg, 2000);
    
} 

let interval = setup(); //clearInterval(interval) to stop the slideshow

Upvotes: 1

Brendan Bond
Brendan Bond

Reputation: 1890

The "sliders" variable isn't available to the "changeImg" function because it's in the "setup" function's scope. Try something like

let slide;
function setup() {
    let sliders = ['cap_1.jpg', 'cap_2.jpg', 'spidermen.jpg'];
    // I don't know anything about the p5 library, so I'm assuming 
    // all of the code below runs (i.e. createImg() returns an HTML img element); if not, look into functions like
    // document.createElement(), because it's not always 
    // straightforward or obvious how to change certain element 
    // attributes like classes and parents
    slide = createImg(sliders[0], 'An image of Steve Rogers');
    slide.parent('container');
    slide.class('images');
    setInterval(() => changeImg(sliders[1]), 2000);
    
} 

const changeImg = (targetUrl) => {
    slide.src = targetUrl;
}

Upvotes: 1

Related Questions