CODEWITHSUNDEEP
jqueryhtmlcss
user3367090
user3367090

Reputation: 9

Making random image appear with the click of a button?

I'm currently trying to code a button that will change the background of my webpage to a random image. My code seemed to be working but it would only use the last image inside of my line of if/else statements (I may need to use cases). I'm trying to make it choose a random image with Math.floor(Math.random()*3). What it does is it uses and if statement that says:

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)")
   }

Should I use a switch statement? Should I use a for loop?

Thank you for your time and cooperation.

Upvotes: 0

Views: 1394

Answers (6)

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

=1 does does not return true or false (it isn't conditionally checking), so I think you're looking for ===1. Three equal signs because the types are not being converted to check against each other. However, a switch statement would be much more efficient in this case:

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;
}

I changed 1-3 to 0-2, because that's what randomImg ranges to.

This, or do what nevermind suggests and create an array.

Upvotes: 0

sinisake
sinisake

Reputation: 11328

Or, you can avoid if/else:

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/ simple, store bgr images to array, and choose one element...

EDIT: to make things more dynamic use something like this:

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

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

So, you are not limited to 3 images, array length is limit...

Upvotes: 1

M B Parvez
M B Parvez

Reputation: 816

You do not need to write that large code. Just use this -

$("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] +")");
})

Upvotes: 0

Vrutin Rathod
Vrutin Rathod

Reputation: 900

You are assigning rather than checking.

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)")
}

Upvotes: 0

LIGHT
LIGHT

Reputation: 5712

= is assigning operator. use == which is comparison operator

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)")
   }
   else 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)")
   }
   else if (randomImg == 2) {
       $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
   }

Upvotes: 0

SajithNair
SajithNair

Reputation: 3867

All the if statements should have == instead of =

randomImg = 1

should be

randomImg == 1

Upvotes: 0

Related Questions