Получить атрибут из указанного элемента c класса

Question

В основном мне нужно разработать игру Ti c -Ta c -Toe, вот файл HTML, который я не могу переписать, только немного переформатировать, но идея должна остаться прежней.

{% 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 %}

Как видите, у меня есть класс игровых ячеек, который по умолчанию содержит 9 элементов. Я хотел бы вернуть данные-координаты-х и данные-координаты-у, когда я щелкаю одну из игровых ячеек. У меня была предыдущая попытка, но если я нажал, она вернула все блоки, а не только тот, на который я нажал. Я должен написать это в Js. Если вы можете указать мне правильное направление, этого более чем достаточно для меня. Спасибо!

Answer 1

Если я правильно понял, вам нужно получить доступ к атрибутам данных вашего элемента игровой ячейки. Для этого вам нужно выбрать элемент по некоторому идентификатору или классу. Я немного изменил ваш код, чтобы он работал на платформе stackoverflow. Я добавил идентификатор, который я назвал «уникальным», и я также установил некоторые значения в ваши атрибуты данных координат-x и y. Пожалуйста, просмотрите приведенный ниже код и посмотрите, как мне удалось получить эти атрибуты данных. Важно отметить, что это не единственный способ получить к ним доступ.

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>

Также возможно получить эти значения, используя метод getAttribute .

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

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

Пожалуйста, посмотрите на эту страницу, она объясняет некоторые аспекты атрибутов данных:

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

Answer 2

Просто войдите в свою игровую ячейку, по которой щелкнули, по: (она найдет координату X и координату Y)

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

Answer 3

вы должны получить свой элемент по имени класса или идентификатору (добавить идентификатор), чем вы можете получить его атрибуты, подобные этому

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