How can I grab the index with JS?

Question

.tb button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: gray;
  border: 3px solid black;
  margin: 1px;
}

body {
  text-align: center;
}



  Welcome to Connect Four!
  The object of this game is to connect four of your chips in a row!
  :it is your turn, please pick a column to drop your blue chip.

I want to make the function that returns the index of a clicked button with JQuery. In addition to that, I want to make use of the index later for other functions. For example, if I click the index number 0 button on Google Chrome, I want the function to return 0. How can I make the function with JavaScript? I am a beginner, therefore plain coding would be happy for me.

user_4964569 · Answer

You can use $(this).parent('th').index() for get column index

and $(this).closest('tr').index() for row index

also should use tr instead thead tag

   $("button").click(function() {
    var col_index = $(this).parent('th').index();
    var row_index = $(this).closest('tr').index();
    alert(row_index + "-" + col_index);
});

$("button").click(function() {
    var col_index = $(this).parent('th').index();
    var row_index = $(this).closest('tr').index();
    alert(row_index + "-" + col_index);
});

.tb button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: gray;
  border: 3px solid black;
  margin: 1px;
}

body {
  text-align: center;
}




  Welcome to Connect Four!
  The object of this game is to connect four of your chips in a row!
  :it is your turn, please pick a column to drop your blue chip.

user_1014378 · Answer

Since you're using jQuery, you can use the index() function.

You can define a global variable, for instance buttonIndex, and when a button is pressed save the index value in that variable:

let buttonIndex;

$('button').click( function() {
    buttonIndex = $(this).index();
});

Now you can use buttonIndex in other functions as well. This is the solution if you want the index relative to all the buttons in your page.

Hope this helps.

user_5688477 · Answer

You can add the id to the button and then on click you can use that id

For eg


        ...
      

        ...
      

...

Your Javascript Code will be

$("button").click(function() {
    alert(this.id); // or alert($(this).attr('id'));
});

How can I grab the index with JS?

3 Answers