Вызов функции через onClick JS

15 июня 2019, 07:40

Имеется таблица 3х3. При клике на какой-либо элемент он становится прозрачным. Получается сделать это прописав onClick="this.style.opacity='0';" в каждую из девяти ячеек. Помогите написать функцию, которая делает то же самое, но не лежит, а только вызывается из каждой ячейки.

Answer 1

Добавьте класс каждой ячейке, например cell. Затем в цикле повесьте обработчик на каждую ячейку

document.querySelectorAll('.cell').forEach(function(cell) { 
  cell.addEventListener('click', function() { 
    cell.style.opacity = '0' 
  }) 
})

td { 
  background-color: red; 
}

<table style="width:100%"> 
  <tr> 
    <td class="cell">2</td> 
    <td class="cell">3</td> 
    <td class="cell">4</td> 
  </tr> 
  <tr> 
    <td class="cell">4</td> 
    <td class="cell">5</td> 
    <td class="cell">6</td> 
  </tr> 
  <tr> 
    <td class="cell">7</td> 
    <td class="cell">8</td> 
    <td class="cell">9</td> 
  </tr> 
</table>

Answer 2

С помощью метода querySelectorAll в который передается css селектор, найдите все td. В нашем случае подойдет селектор table td

Затем пройдитесь по полученному массиву циклом forEach где каждый элемент это порядковый экземпляр td

Далее для каждого элемента добавляем событие onclick (клик) при котором происходит toogle свойства opacity

document.querySelectorAll('table td').forEach(function(obj) { 
  obj.onclick = function() { 
    obj.style.opacity = (obj.style.opacity == 1 || obj.style.opacity == '' ? 0 : 1); 
  } 
});

td { 
  padding: 10px; 
}

<table border="1"> 
  <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
  </tr> 
  <tr> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
  </tr> 
  <tr> 
    <td>7</td> 
    <td>8</td> 
    <td>9</td> 
  </tr> 
</table>