Get attribute from a specific element of a class

Question

Basically I have to develop a Tic-Tac-Toe game, here is the HTML file which I can't rewrite only reformat a bit, but the idea should stay the same.

{% block content %}
    <nav class="navbar fixed-top navbar-light">
        <button id="retry-button" class="btn btn-success">Try again?</button>
        <a href="/" class="btn btn-outline-dark">Reset settings</a>
    </nav>
    <div id="game-board" class="mb-3" data-row-num="{{ row_num }}" data-col-num="{{ col_num }}" data-win-size="{{ win_size }}">
        {% for row in range(row_num) %}
            <div>
                {% for col in range(col_num) %}
                    <div class="game-cell"
                         data-coordinate-x="{{ col }}"
                         data-coordinate-y="{{ row }}"></div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
{% endblock %}

As you can see i have a game-cell class which contains by default 9 elements. I would like to return the data-coordinate-x and data-coordinate-y when I click one of the game-cells. I had a previous try but if I clicked it returned all of the blocks not just the one i clicked on. I have to write it in Js. If you can point me in the right direction that's more than enough for me. Thanks!

Answer 1

If I understood correctly, you need to access data attributes of your game-cell element. In order to do this, you need to select the element by some ID or class. I have modified your code a little to make it run inside stackoverflow`s platform. I have added an ID which i called "unique" and I also set some values into your coordinate-x and y data attributes. Please review the code bellow and see how I managed to get those data attributes. It's important to notice that this is not the only way to access them.

 var gamecell = document.getElementById('unique'); console.log(gamecell.dataset.coordinateX); console.log(gamecell.dataset.coordinateY);

 <nav class="navbar fixed-top navbar-light"> <button id="retry-button" class="btn btn-success">Try again?</button> <a href="/" class="btn btn-outline-dark">Reset settings</a> </nav> <div id="game-board" class="mb-3" data-row-num="{{ row_num }}" data-col-num="{{ col_num }}" data-win-size="{{ win_size }}"> <div> <div class="game-cell" id="unique" data-coordinate-x="172" data-coordinate-y="273"></div> </div> </div>

Its also possible to get these values using the getAttribute method.

var elem = document.getElementById('unique');

var coordX = elem.getAttribute('data-coordinateX');
var coordY   = elem.getAttribute('data-coordinateY');

Please, take a look at this page, it explains some aspects of data attributes:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Answer 2

Simply access your clicked game-cell by: (it will find the clicked coordinateX and coordinateY)

document.querySelectorAll('.game-cell').forEach((game) => {
   game.addEventListener('click',function(event){
   console.log(game.dataset.coordinateX);
   console.log(game.dataset.coordinateY);
  });
});

Answer 3

you must to get your element by class name or id(add an id) than you can get its attributes like this

let gameCell = document.getElementById('game-cell-id');// id for example
gameCell.getAttribute('data-coordinate-x')