CODEWITHSUNDEEP
jqueryhtml
sajax63
sajax63

Reputation: 13

Jquery change image randomly on click

Html 

    <body>
        <img class = die src="one.jpg">
        <img class = die src="two.jpg">
        <img class = die src="three.jpg">
        <img class = die src="energy.jpg">
        <img class = die src="hit.jpg">
        <img class = die src="heal.jpg">
    </body>

Jquery

 var dice = ["one.jpg","two.jpg","three.jpg","energy.jpg","hit.jpg","heal.jpg"];
    $(function() {
        $('.die').click(function() {
            var num = Math.floor(Math.random()*dice.length);
            $(this).html('<img src="'+dice[num]+'">');
        });
    });

Whenever I test it out it would not change the image Thanks for your time

Upvotes: 1

Views: 1074

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to change the src attribute of the img which was clicked

$(function() {
  //var dice = ["//placehold.it/64X64&text=1", "//placehold.it/64X64&text=2", "//placehold.it/64X64&text=3", "//placehold.it/64X64&text=4", "//placehold.it/64X64&text=5", "//placehold.it/64X64&text=6"];

  //create the array dynamically using the .die elements
  var dice = $('.die').map(function() {
    return $(this).attr('src')
  }).get();

  $('.die').click(function() {
    var num = Math.floor(Math.random() * dice.length);
    //This may not change the image always as the same src can be selected by this logic
    $(this).attr('src', dice[num]);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="die" src="//placehold.it/64X64&text=1">
<img class="die" src="//placehold.it/64X64&text=2">
<img class="die" src="//placehold.it/64X64&text=3">
<img class="die" src="//placehold.it/64X64&text=4">
<img class="die" src="//placehold.it/64X64&text=5">
<img class="die" src="//placehold.it/64X64&text=6">

The die element is an img element, you can't set the innerHTML of img element, instead you need to change the src attribute to change the image

If you want to change the image in every click

$(function() {
  //var dice = ["//placehold.it/64X64&text=1", "//placehold.it/64X64&text=2", "//placehold.it/64X64&text=3", "//placehold.it/64X64&text=4", "//placehold.it/64X64&text=5", "//placehold.it/64X64&text=6"];

  //create the array dynamically using the .die elements
  var dice = $('.die').map(function() {
    return $(this).attr('src')
  }).get();

  $('.die').click(function() {
    var src, curr = $(this).attr('src');
    do {
      src = dice[Math.floor(Math.random() * dice.length)]
    } while (src == curr);
    $(this).attr('src', src);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="die" src="//placehold.it/64X64&text=1">
<img class="die" src="//placehold.it/64X64&text=2">
<img class="die" src="//placehold.it/64X64&text=3">
<img class="die" src="//placehold.it/64X64&text=4">
<img class="die" src="//placehold.it/64X64&text=5">
<img class="die" src="//placehold.it/64X64&text=6">

Upvotes: 2

Related Questions