5

Доброго времени суток. Нужна помощь Есть таблица, хочу каждый элемент сделать кликабельным Вот так работает :

var variable = document.getElementById('test');

Но кликабельным получается только первый элемент естественно

variable.addEventListener("click", showNumber);

Пытаюсь так чтобы все:

var variable = document.getElementsByTagName('td');
var variable = document.querySelectorAll('.class');

variable.addEventListener("click", showNumber);

Не получается.

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 16 мая 2016 в 7:12

3 ответа 3

3

В дополнение к ответу @Grundy, несколько вариантов навесить событие:

const elements = document.querySelectorAll(".element");

for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click", function() {
        elements[i].classList.toggle("active");
    });
}
.element.active {
    background: #7fcdff;
}
<div class="element">element 1</div>
<div class="element">element 2</div>
<div class="not-element">not element</div>
<div class="element">element 3</div>


const elements = document.querySelectorAll(".element");

for (const element of elements) {
    element.addEventListener('click', function(event) {
        element.classList.toggle("active");
    })
}
.element.active {
    background: #7fcdff;
}
<div class="element">element 1</div>
<div class="element">element 2</div>
<div class="not-element">not element</div>
<div class="element">element 3</div>


[...document.querySelectorAll('.element')].forEach(function(element) {
    element.addEventListener('click', function() {
       element.classList.toggle("active");
    });
});
.element.active {
    background: #7fcdff;
}
<div class="element">element 1</div>
<div class="element">element 2</div>
<div class="not-element">not element</div>
<div class="element">element 3</div>


.forEach и стрелочные функции

const elements = document.querySelectorAll(".element");

elements.forEach(element => {
        element.addEventListener("click", () => { 
            element.classList.toggle("active");
        });
    }
);
.element.active {
    background: #7fcdff;
}
<div class="element">element 1</div>
<div class="element">element 2</div>
<div class="not-element">not element</div>
<div class="element">element 3</div>

1
  • [...document.querySelectorAll('.element')] -- у NodeList и так есть метод forEach.
    – ΝNL993
    22 апр в 18:53
1

querySelectorAll и getElementsByTagName возвращают коллекции, следовательно, чтобы назначить обработчик, нужно пройтись по всей коллекции и назначить его каждому элементу, например:

var variables = document.querySelectorAll('.class');
[].forEach.call(variables, function(variable){
    variable.addEventListener("click", showNumber);
});
7
  • Зачем тратится на создание пустого массива и поиска в его прототипе метода? Array.prototype проще.
    – user207618
    15 мая 2016 в 11:41
  • @Other, писать дольше, а так же тесты показывают что особой разницы нет. Есть какие-то основания говорить, что лучше Array.prototype кроме проще? тем более, не совсем понятно, что под этим словом имеется ввиду в данном случае
    – Grundy
    15 мая 2016 в 11:47
  • Некоторые с пеной у рта доказывали что брать сразу у прототипа дешевле, чем создавать и искать. Лень проверять, поэтому я просто предложил.
    – user207618
    15 мая 2016 в 11:49
  • @Other, стоит отметить что литералы это не совсем обычные объекты
    – Grundy
    15 мая 2016 в 12:18
  • Да, но при интерпретации их всё-равно пропускают через мясорубку конструктора.
    – user207618
    15 мая 2016 в 12:25
1

Cобытия клика «пузырьками» поднимаются наверх: от <td> к <tr> и <table>. Может, просто ловить события клика у <table> – и определять оригинального инициатора клика?

var table = document.getElementById('e-table'),
  out = document.getElementById('out');

table.addEventListener('click', function(e){
  if( e.target.tagName !== 'TD') return; // ждём клика по <td>
  out.innerHTML = e.target.innerHTML;
});
body{font-family:Helvetica,Arial,sans-serif;}
td{border:1px solid #CCC; cursor:pointer; width:15px;height:15px; text-align:center}
#out{padding:5px;width:60px;height:40px;background-color:#CCC;text-align:center}
<table id="e-table">
  <tr> <td>1</td> <td>2</td> <td>3</td> </tr>
  <tr> <td>A</td> <td>B</td> <td>C</td> </tr>
  <tr> <td>.</td> <td>..</td> <td>...</td> </tr>
</table>
<div id="out"></div>

1
  • 1
    @Anton, если интересно, этот приём называется делегирование событий: learn.javascript.ru/event-delegation
    – user207618
    15 мая 2016 в 10:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.