dnana dnana - 5 months ago 17
Javascript Question

want to change images randomly in HTML on Click on button

I am learning html5 and javascript ,

I want to change images randomly on Click of button ,I have three images locally stored and want to set those images and also want store data that which image get set how many times in database .

anyone have an idea how to do it , Thanks in advance.

want to pass some random number to function changeImage(randomNumber) and as per number want to change image

<!DOCTYPE html>
<html>
<head>
<h1>Click on Image to Change Image </h1>
<script>
function changeImage(){
var image = document.getElementById("image");
switch(1){
case 1 :
image.src = "tulips.JPG";
break;
case 2 :
image.src = "life.JPG";
break;
case 3:
image.src = "Desert.JPG";
break;
document.getElememtById("image_change_button").innerHTML = Math.random();
}
}
</script>
</head>
<body>
<div>
<img id = "image" src = "life.JPG" width = "480" height = "100" ></img>
</div>
<div>
<button id = "image_change_button" onClick = "changeImage()" width = " 100" height = "100">OnClick</button>
</div>
</body>
</html>

Answer

To reload an image on the webpage with another one use jQuery. It has ".load" function with which you can load content into some element. Before loading it you will have to generate a random number which will select the image from a predefined array of images (case 1 show pic 1.jpg, case 2.. and so on).

What's more important is that JavaScript and jQuery are executed on the client's side, so you won't be able to access the database from them. You will need some kind of server-side language, for example PHP which will store data in the database.

EDIT:

Haven't tested it, but you can get a basic idea from this:

//...
<script>
function changeImage(){
                randInt = Math.random(3)+1;
                switch(randInt){
                case 1 :
                    image = "tulips.JPG";
                    break;
                case 2 :
                    image = "life.JPG";
                    break;
                case 3:
                    image = "Desert.JPG";
                    break;
                document.getElememtById("image_container").innerHTML = 
                    "<img src='" + image + "'/>";
                }
          }
</script>
//...
<div id="image_container"></div><br/>
<div onclick="changeImage()">CLICK ME!</div>
//...

Edit2:

As for working with the local database, please refer to:

http://blog.darkcrimson.com/2010/05/local-databases/

For example you can just add this to the changeImage() function:

// between the last two curly braces inser a semicolon and then   
if(typeof(Storage)!=="undefined"){
   if (localStorage.clickcount){
localStorage.clickcount=Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " +     localStorage.clickcount + " time(s).";
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
};

}

Now after that create a div with the ID "result" which will show the current result.