Change events on Each click

1

Tell us what’s happening:
Hello
I am new To Coding and i m having some problems writing the algorithms

i Want to have a code that change text or Color or Image on each click
i thought of using a loop but i think i m not doing it right

Please provide some help and some “Advices” on how to learn and Practice

Thanks in advance

Your code so far

<script>
  $(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
        var arr = ["1","2","3"];
      var color =["red","green","white"];
        for(var i = Math.random(); i < arr.length; i++){
          $(".message").html(arr[i]);
          $("body").css("background-color","")
        }
        
        
      
        
      // Only change code above this line.
    });
  });
</script>


<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/change-text-with-click-events

2

You should first review the Generate Random Whole Numbers with JavaScript. That challenge will show you how to generate a random integer between 0 up to a specific integer. Then, you can use this integer to represent an array index of your color array. You do not need a for loop at all.

1 Like
3

Thank you! it Worked