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

Random Background Image from Button Click

One Answer

Add your own answers!

Related Questions

Efficiently Zip multiple list in python/pandas

Pandas Excel groupby/count

How to call a php function in javascript using Ajax?

Angular class names based on item values

is there any way to give name object?

HTML hidden not submitting

ERROR TypeError: Cannot read property ‘codeSprint’ of undefined at Object.eval [as updateRenderer] using Angular

how to find and remove array using jquery

Laravel GraphQL and Sanctum – how to combine it?

Is it a good idea to implement CQRS Read model as an Aggregate?

How to save multiple figures built with a loop and mapplot packages in r?

Pick from both sides?

When to use AutoScalingScheduledAction when using UpdatePolicy for ASG using CloudFormation template?

how to return only the True values?

multiple image galleries on one page

System.MissingMethodException: Method not found?

Use auto for only one variable with structured binding

What does the & symbol mean here and whats going on here?

useEffect is not getting call first time when parent state is changed by child state at

How to get suffix of filename in javascript quickly?

Ask a Question