0

i have been trying to get some code to work, and i am just not sure what i am missing. but after about 2 hours of trying, I came to ask for a little bit of help, probably i'm not holding my tongue right.

any ways I start off with appending 3 buttons using jquery.

var dogActions = ["drivingPets","walkingPets","sleepingPets"];

$(document).ready(function () {          
  for (var i = 0; i < dogActions.length; i++){
      $('#ArrayD').append('<button id="' + dogActions[i]  + '">' + dogActions[i] + " " + 'Dogs </button>' + " ");
             $('#ArrayD').append('<div id="' + dogActions[i]  + 'span"></div>' );


           }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



  <div id="ArrayD"></div>

I then would like a click event for each button

var dogActions = ["drivingPets","walkingPets","sleepingPets"];

$(document).ready(function () {          
  for (var i = 0; i < dogActions.length; i++){
      $('#ArrayD').append('<button id="' + dogActions[i]  + '">' + dogActions[i] + " " + 'Dogs </button>' + " ");
             $('#ArrayD').append('<div id="' + dogActions[i]  + 'span"></div>' );


           }
 });
 
 
 
 $(document).ready(function () {          
  for (var i = 0; i < dogActions.length; i++){
  $('#'+dogActions[i]).click(function () {
     alert(dogActions[i]);
 });
           }
 });
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <div id="ArrayD"></div>

the above gives me an undefined error so the issue is with the i being undefined.

I try to correct this

var dogActions = ["drivingPets","walkingPets","sleepingPets"];

$(document).ready(function () {          
  for (var i = 0; i < dogActions.length; i++){
      $('#ArrayD').append('<button id="' + dogActions[i]  + '">' + dogActions[i] + " " + 'Dogs </button>' + " ");
             $('#ArrayD').append('<div id="' + dogActions[i]  + 'span"></div>' );


           }
 });
 
 
 
 $(document).ready(function () {          

  $('#'+dogActions[0]).click(function () {
     alert(dogActions[0]);
     });
     
       $('#'+dogActions[1]).click(function () {
     alert(dogActions[1]);
     });
     
       $('#'+dogActions[2]).click(function () {
     alert(dogActions[2]);
     });
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ArrayD"></div>

works, but isn't DRY. and is a waste of time. can you help?

aaron lilly
  • 274
  • 1
  • 14
  • 1
    `i` is not defined in your click callback, you can access the button's properties though. Besides that, read about event delegation or at least add the handler to an entire class, if you want to save time. No point in binding similar click handlers one by one. – Ravenous Apr 23 '20 at 20:41
  • i tried as the link suggests, but it is beyond my current understanding, can this be reeopened so i can actually get an understanding with code? – aaron lilly Apr 23 '20 at 21:17
  • 1
    When the actual handler, the contents of `click`, is executed, you are in a different scope. The loop was ended at that point, there is no `i`. Instead of `alert(dogActions[i])`, try `$(this).id` – Ravenous Apr 23 '20 at 21:34
  • $(document).ready(function () { var funcs = []; for (var i = 0; i < dogActions.length; i++){ $('#'+dogActions[i]).click(function (x) { alert(dogActions[x]); }.bind(this, i)); } }); – aaron lilly Apr 24 '20 at 00:31

0 Answers0