How about having a surprise image pop up when you click a button?

Question

How about having a surprise image pop up when you click a button?

I've been working on coding a button that can change the background of my webpage to display a random image. Initially, my code seemed functional, but it was only displaying the last image listed in my series of if/else statements. I suspect that using switch cases might be more suitable. My goal is for the code to select a random image by using Math.floor(Math.random()*3). Currently, I have set up an if statement as follows:

var randomImg = Math.floor(Math.random()*3);
   if (randomImg === 1) {
       $('html').css("background-image","url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
   }
   if (randomImg === 3) {
       $('html').css("background","url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
   }
   if (randomImg === 2) {
       $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
   }

Do you think utilizing a switch statement would be better for this scenario? Or perhaps incorporating a for loop could enhance the functionality?

Thank you for your assistance and input.

jquery html css

Answer 1

Answer №1

Instead of using if/else statements, you can try this approach:

var randomImg = (Math.floor(Math.random()*3));

images=new Array('http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993','http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg','http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg');

 $('html').css("background-image","url("+images[randomImg] +")");

http://jsfiddle.net/7ExyY/ provides a simple way to store background images in an array and randomly choose one for display.

UPDATE: For a more dynamic solution, consider the following code:

var randomImg = (Math.floor(Math.random()*images.length));
console.log(randomImg);
$('html').css("background-image","url("+images[randomImg] +")");

http://jsfiddle.net/7ExyY/2/

This method allows for flexibility by not limiting the number of images in the array.

Answer 2

Instead of using if/else statements, you can try this approach:

var randomImg = (Math.floor(Math.random()*3));

images=new Array('http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993','http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg','http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg');

 $('html').css("background-image","url("+images[randomImg] +")");

http://jsfiddle.net/7ExyY/ provides a simple way to store background images in an array and randomly choose one for display.

UPDATE: For a more dynamic solution, consider the following code:

var randomImg = (Math.floor(Math.random()*images.length));
console.log(randomImg);
$('html').css("background-image","url("+images[randomImg] +")");

http://jsfiddle.net/7ExyY/2/

This method allows for flexibility by not limiting the number of images in the array.

Answer 3

Answer №2

It is important to ensure that all if statements use == instead of =

number = 7

must be changed to

number == 7

Answer 4

It is important to ensure that all if statements use == instead of =

number = 7

must be changed to

number == 7

Answer 5

Answer №3

= serves as an assigning operator. It is recommended to use ==, which functions as a comparison operator.

let randomImage = (Math.floor(Math.random()*3))
   if (randomImage == 1) {
       $('html').css("background-image","url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
   }
   else if (randomImage == 3) {
       $('html').css("background","url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
   }
   else if (randomImage == 2) {
       $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
   }

Answer 6

= serves as an assigning operator. It is recommended to use ==, which functions as a comparison operator.

let randomImage = (Math.floor(Math.random()*3))
   if (randomImage == 1) {
       $('html').css("background-image","url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
   }
   else if (randomImage == 3) {
       $('html').css("background","url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
   }
   else if (randomImage == 2) {
       $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
   }

Answer 7

Answer №4

Make sure to properly differentiate between assignment and comparison.

To assign a value to a variable, use "="; to check a value against another, use "==".

var randomImg = (Math.floor(Math.random() * 3))
if (randomImg == 1) {
    $('html').css("background-image", "url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
}
if (randomImg == 3) {
    $('html').css("background", "url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
}
if (randomImg == 2) {
  $('html').css("background", "url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
}

Answer 8

Make sure to properly differentiate between assignment and comparison.

To assign a value to a variable, use "="; to check a value against another, use "==".

var randomImg = (Math.floor(Math.random() * 3))
if (randomImg == 1) {
    $('html').css("background-image", "url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
}
if (randomImg == 3) {
    $('html').css("background", "url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
}
if (randomImg == 2) {
  $('html').css("background", "url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
}

Answer 9

Answer №5

Instead of writing a lot of code, you can simply use this snippet:

$("button").click(function(){

    var img = (Math.floor(Math.random()*3));

    allImg = new Array('link/to/img1.jpg','link/to/img2.jpg','link/to/img3.jpg');

    $('html').css("background-image","url("+allImg[img] +")");
})

Answer 10

Instead of writing a lot of code, you can simply use this snippet:

$("button").click(function(){

    var img = (Math.floor(Math.random()*3));

    allImg = new Array('link/to/img1.jpg','link/to/img2.jpg','link/to/img3.jpg');

    $('html').css("background-image","url("+allImg[img] +")");
})

Answer 11

Answer №6

=1 does not yield a true or false value since it is not being conditionally checked, so using ===1 would be more appropriate. The three equal signs ensure that the types are not converted to check against each other. Alternatively, utilizing a switch statement would offer greater efficiency in this scenario:

var randomImg = (Math.floor(Math.random()*3))
switch(randomImage)
{
    case 0:
    $('html').css("background-image","url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
    break;

    case 1:
    $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
    break;

    case 2:
    $('html').css("background","url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
    break;
}

The values have been changed from 1-3 to 0-2 to align with the range of randomImg.

You could also follow the suggestion by nevermind and consider creating an array for this purpose.

Answer 12

=1 does not yield a true or false value since it is not being conditionally checked, so using ===1 would be more appropriate. The three equal signs ensure that the types are not converted to check against each other. Alternatively, utilizing a switch statement would offer greater efficiency in this scenario:

var randomImg = (Math.floor(Math.random()*3))
switch(randomImage)
{
    case 0:
    $('html').css("background-image","url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
    break;

    case 1:
    $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
    break;

    case 2:
    $('html').css("background","url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
    break;
}

The values have been changed from 1-3 to 0-2 to align with the range of randomImg.

You could also follow the suggestion by nevermind and consider creating an array for this purpose.

How about having a surprise image pop up when you click a button?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

"JavaScript/jQuery: The pattern in the text does not align with the string

What is the best way to create a new row at a specific index in an ng-repeat loop?

Utilizing Jquery DataTables for server-side processing in an MVC 4 environment

Which programming language is best suited for this task?

The utilization of Display Flex resulting in the enlargement of the containing div

Create a unique bar chart plugin using Javascript/jQuery that allows users to drag and drop data

Separate the two divs with some added spacing

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

The inefficacy of the JQUERY validation plugin, AJAX, and PHP integration

Changing the cursor while the onDrag event is active in ReactJs

Adjust the dimensions and position of the notification box using Twitter Bootstrap

Is there a way to allow scrolling in only one direction using CSS?

The jQuery.addClass() function seems to be malfunctioning

Expanding the <li> elements to create a wide horizontal navigation menu that fits within a 960 grid layout with 12 columns

Webpack failing to load jQuery correctly

Alter the typography of the text that has been enhanced by Google

What are the steps to design a curved gauge with a linear-gradient background?

Having trouble getting the controller function to execute in Laravel 8

What is the most effective method for declaring a constant within a WebComponent?

The server-side PHP script may not always successfully respond to an Ajax call from the client