JavaScript random image generator

[joeysusssex123]

Hi all, i am very new to javascript so bare with me. I am trying to build a very basic random image generator (for practice) but am having trouble with my code. This is what I have so far. I can do it so it changes colours but not images and i am struggling to understand why.

const button = document.querySelector('button')

const wrapper = document.querySelector('wrapper')

const background = ['images/italy1.avif','images/italy2.avif', 'images/italy3.avif', 'images/italy4.avif', 'images/italy5.avif', 'images/italy6.avif']

wrapper.style.background = "images/italy2.avif"

button.addEventListener('click', clickMe);

function clickMe(){

    const ranim = parseInt(Math.random()*background.length)

    wrapper.style.background = background[ranim]

}

Any help would be appreciated.

Thanks

Joe

 

[Antero360]

Hi all, i am very new to javascript so bare with me. I am trying to build a very basic random image generator (for practice) but am having trouble with my code. This is what I have so far. I can do it so it changes colours but not images and i am struggling to understand why.

const button = document.querySelector('button')

const wrapper = document.querySelector('wrapper')

const background = ['images/italy1.avif','images/italy2.avif', 'images/italy3.avif', 'images/italy4.avif', 'images/italy5.avif', 'images/italy6.avif']

wrapper.style.background = "images/italy2.avif"

button.addEventListener('click', clickMe);

function clickMe(){

    const ranim = parseInt(Math.random()*background.length)

    wrapper.style.background = background[ranim]

}

Any help would be appreciated.

Thanks

Joe

Hey there,

Give this a try, instead of setting the background to just a string, as you are currently doing, surround that string in the

url(string)

method

 

[joeysusssex123]

Hey there,

Give this a try, instead of setting the background to just a string, as you are currently doing, surround that string in the

url(string)

method

Hi there thanks for the reply. Sadly I have tried this but it didn't work.

 

[Antero360]

Hi there thanks for the reply. Sadly I have tried this but it didn't work.

something else you can try: setting good ol faithful style attribute

//one way
wrapper.style = 'background-image: url("path/to/image")';

//another way
wrapper.setAttribute('style', 'background-image: url("/path/to/image")');

 

[joeysusssex123]

something else you can try: setting good ol faithful style attribute

//one way
wrapper.style = 'background-image: url("path/to/image")';

//another way
wrapper.setAttribute('style', 'background-image: url("/path/to/image")');

Hi So that helped with setting the default image but when i click the button it goes to the default background image on the style sheet?? Here is my updated code.

const button = document.querySelector('button')
const body = document.querySelector('wrapper')
const bimage = ['images/italy1.avif','images/italy2.avif', 'images/italy3.avif', 'images/italy4.avif', 'images/italy5.avif', 'images/italy6.avif']

wrapper.style = 'background-image: url("images/italy1.avif")'

button.addEventListener('click', clickMe);

function clickMe(){
    const ranim = parseInt(Math.random()*bimage.length)
    wrapper.style = bimage[ranim]
}

 

[Antero360]

Hi So that helped with setting the default image but when i click the button it goes to the default background image on the style sheet?? Here is my updated code.

const button = document.querySelector('button')
const body = document.querySelector('wrapper')
const bimage = ['images/italy1.avif','images/italy2.avif', 'images/italy3.avif', 'images/italy4.avif', 'images/italy5.avif', 'images/italy6.avif']

wrapper.style = 'background-image: url("images/italy1.avif")'

button.addEventListener('click', clickMe);

function clickMe(){
    const ranim = parseInt(Math.random()*bimage.length)
    wrapper.style = bimage[ranim]
}

that's because you're not setting anything in the function 🙂

 

[Antero360]

Hi So that helped with setting the default image but when i click the button it goes to the default background image on the style sheet?? Here is my updated code.

const button = document.querySelector('button')
const body = document.querySelector('wrapper')
const bimage = ['images/italy1.avif','images/italy2.avif', 'images/italy3.avif', 'images/italy4.avif', 'images/italy5.avif', 'images/italy6.avif']

wrapper.style = 'background-image: url("images/italy1.avif")'

button.addEventListener('click', clickMe);

function clickMe(){
    const ranim = parseInt(Math.random()*bimage.length)
    wrapper.style = bimage[ranim]
}

try this

button.addEventListener('click', clickMe);

function clickMe(){
    const ranim = parseInt(Math.random()*bimage.length);
    var wrapper = document.querySelector('.wrapper');  
    wrapper.style = [ICODE]background-image: url(${bimage[ranim]})[/ICODE];
}

OR

button.addEventListener('click', function(event){
    const ranim = parseInt(Math.random()*bimage.length);
    event.target.style = bimage[ranim]
});