来自按钮单击的随机背景图像

Question

I'm trying to make a random background generator that allows the user to select a season and get a random background image.我正在尝试制作一个随机背景生成器，它允许用户在一个季节 select 并获得一个随机背景图像。 I'm using a different array and function for each season.我在每个季节都使用不同的数组和 function。 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.我尝试在我的seasonFall()的不同部分使用警报，并注意到每次单击按钮时我实际上都会为背景获得不同的 url。 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) https://www.w3schools.com/jsref/prop_style_backgroundimage.asp （用于背景图片属性）
Get random item from JavaScript array (used to get random part of array) 从 JavaScript 数组中获取随机项（用于获取数组的随机部分）

Similar Question Found:发现类似问题：

Random background image button? 随机背景图片按钮？ (done using jQuery but I just want to use Javascript) （使用 jQuery 完成，但我只想使用 Javascript）

Answer 1

I'm trying to make a random background generator that allows the user to select a season and get a random background image.我正在尝试制作一个随机背景生成器，它允许用户在一个季节 select 并获得一个随机背景图像。 I'm using a different array and function for each season.我在每个季节都使用不同的数组和 function。 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.我尝试在我的seasonFall()的不同部分使用警报，并注意到每次单击按钮时我实际上都会为背景获得不同的 url。 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) https://www.w3schools.com/jsref/prop_style_backgroundimage.asp （用于背景图片属性）
Get random item from JavaScript array (used to get random part of array) 从 JavaScript 数组中获取随机项（用于获取数组的随机部分）

Similar Question Found:发现类似问题：

Random background image button? 随机背景图片按钮？ (done using jQuery but I just want to use Javascript) （使用 jQuery 完成，但我只想使用 Javascript）

来自按钮单击的随机背景图像

问题描述

1 个解决方案

解决方案1
0 2020-07-31 09:53:29

来自按钮单击的随机背景图像

问题描述

1 个解决方案

解决方案1 0 2020-07-31 09:53:29

解决方案1
0 2020-07-31 09:53:29