Поиск объектов по идентификатору с использованием массивов в js - PullRequest
Новая
       3

Поиск объектов по идентификатору с использованием массивов в js

0 голосов
/ 18 января 2020

В моем коде у меня есть таблица 8x8, где каждый <td> имеет идентификатор из двух чисел в диапазоне от 0 до 7 (т. Е. «0, 0», «2, 5» и т. Д. c). Что мне нужно, так это создать функцию, которая при нажатии на <td> дает мне первое и второе числа идентификатора. Я подумал, может быть, я могу сделать это с массивами, но я не знаю, как извлечь два отдельных числа из идентификатора в первую очередь.

Я новичок в JavaScript / html, поэтому объяснение с ответами будет очень полезно!

Ответы [ 2 ]

0 голосов
/ 18 января 2020

Согласно W3:

Значение идентификатора должно содержать хотя бы один символ и должно не содержать пробелы (пробелы, табуляции и т. Д. c.).

Таким образом, если вы устанавливаете идентификатор через <td id="yourId">, тогда yourId не может быть 0, 0.

Для решения этой проблемы вы можете использовать идентификатор xy, где ваши два числа x и y, при условии, что они варьируются от 0 до 7. 

<td onclick="clicked(event)" id="25">click me</td>

Тогда вы можете получить первый и второй символы идентификатора. 

function clicked(event) {
  const id = event.target.id;
  const x = parseInt(id.charAt(0));
  const y = parseInt(id.charAt(1));
  console.log(x);
  // 2
  console.log(y);
  // 5
}
0 голосов
/ 18 января 2020

Сначала необходимо получить все теги <td>, затем выполнить их цикл и установить функцию onclick: 

var cells = document.getElementsByTagName("td");
for (let index = 0; index < cells.length; index++) {
    var cell = cells.item(index);
    cell.onclick = function (e) {
        // Do something
    }
}

В функции onclick имеется событие click, которое содержит целевой элемент html (<td>) теперь нам просто нужно извлечь числа: 

var text = e.target.innerText;                
var result = text.split(","); // splited as text not number
var n1, n2;
n1 = Number(result[0]); // casting text to int(number)
n2 = Number(result[1]); // casting text to int(number)

, где n1 и n2 - это извлеченные числа.

Здесь завершено код: 

var cells = document.getElementsByTagName("td");
for (let index = 0; index < cells.length; index++) {
    var cell = cells.item(index);
    cell.onclick = function (e) {
        var text = e.target.innerText;                
        var result = text.split(",");
        var n1, n2;
        n1 = Number(result[0]);
        n2 = Number(result[1]);
    }
}
...