Random Background Image from Button Click

Stack Overflow Asked by charmy on July 29, 2020

I’m trying to make a random background generator that allows the user to select a season and get a random background image. I’m using a different array and function for each season. I’m confused on what I’m doing wrong to get the background image to change. I tried using an alert in different parts of my seasonFall() and noticed that I am in-fact getting a different url for the background each time the button is clicked. So far I have only tried fall since I want to do the same thing for all other seasons.

Code:

<html>

<body>

  <header>PICK A SEASON!</header>

  <div id="contents">

    <button id="fall" onclick="seasonFall()">Fall Wallpaper</button>
    <button id="spring" onclick="seasonSpring()">Spring Wallpaper</button>
    <button id="summer" onclick="seasonSummer()">Summer Wallpaper</button>
    <button id="winter" onclick="seasonWinter()">Winter Wallpaper</button>
    
  </div>


<script>
  var winter = [
  "https://unsplash.com/photos/5AiWn2U10cw",
  "https://unsplash.com/photos/_TuI8tZHlk4",
  "https://unsplash.com/photos/_TuI8tZHlk4"
 ];

var fall = [
  "https://unsplash.com/photos/wUWP53W7KbY",
  "https://unsplash.com/photos/yuiJO6bvHi4",
  "https://unsplash.com/photos/OU5Q5_9hKvU"
];

var spring = [
  "https://unsplash.com/photos/Z8TQv3yKQd4",
  "https://unsplash.com/photos/l-rtCtc_4c0",
  "https://unsplash.com/photos/NVGKBnfrTD0"
];


var summer = [
  "https://unsplash.com/photos/m82uh_vamhg",
  "https://unsplash.com/photos/JP23z_-dA74",
  "https://unsplash.com/photos/7RQf2X6aXXI"
];

function seasonFall(){
  if (document.getElementById("fall").click){
    alert("testing!!");
    var fallselect = fall[Math.floor(Math.random() * fall.length)];
    document.body.style.backgroundImage = "url('" + fallselect + "')";
    alert("test 2!!");
    alert(fallselect);
  }
}

function seasonSpring(){
  if (document.getElementById("spring").click){
alert("spring");
  }
}

function seasonSummer(){
  if (document.getElementById("summer").click){
alert("summer");
  }
}

function seasonWinter(){
  if (document.getElementById("winter").click){
alert("winter");
  }
}


</script>

<style>

header{
  text-align:center;
  padding-top:100px;
  font-size: 20px;
}

button{
  margin-left:50px;
  margin-right:50px;

}

#contents{
    padding: 200px;
}

</style>
</body>

</html>

Links Used:

https://www.w3schools.com/jsref/prop_style_backgroundimage.asp (for background image property)
Get random item from JavaScript array (used to get random part of array)

One Answer

fix images link then try this code

<html>

<body>

  <header>PICK A SEASON!</header>

  <div id="contents">

    <button id="fall" onclick="seasonFall()">Fall Wallpaper</button>
    <button id="spring" onclick="seasonSpring()">Spring Wallpaper</button>
    <button id="summer" onclick="seasonSummer()">Summer Wallpaper</button>
    <button id="winter" onclick="seasonWinter()">Winter Wallpaper</button>
    
  </div>


<script>







  
  
  function changeBackground(seasonArray){
    var fallselect = seasonArray[Math.floor(Math.random() * seasonArray.length)]; 
    document.body.style.backgroundImage = `url('${fallselect}')`;
  }
  
  
function seasonFall(){
  var fall = [
  "https://unsplash.com/photos/wUWP53W7KbY",
  "https://unsplash.com/photos/yuiJO6bvHi4",
  "https://unsplash.com/photos/OU5Q5_9hKvU"
];

   changeBackground(fall)
}

function seasonSpring(){
  var spring = [
  "https://unsplash.com/photos/Z8TQv3yKQd4",
  "https://unsplash.com/photos/l-rtCtc_4c0",
  "https://unsplash.com/photos/NVGKBnfrTD0"
];

    changeBackground(spring)
}

function seasonSummer(){
  var summer = [
  "https://unsplash.com/photos/m82uh_vamhg",
  "https://unsplash.com/photos/JP23z_-dA74",
  "https://unsplash.com/photos/7RQf2X6aXXI"
];
   changeBackground(summer)
}

function seasonWinter(){
    var winter = [
  "https://unsplash.com/photos/5AiWn2U10cw",
  "https://unsplash.com/photos/_TuI8tZHlk4",
  "https://unsplash.com/photos/_TuI8tZHlk4"
 ];
 changeBackground(winter)
}


</script>

<style>

header{
  text-align:center;
  padding-top:100px;
  font-size: 20px;
}

button{
  margin-left:50px;
  margin-right:50px;

}

#contents{
    padding: 200px;
}

</style>
</body>

</html>

Answered by moufed on July 29, 2020

Add your own answers!

Ask a Question

Get help from others!