Как дописать код? JavaScript. Важно, чтобы ячейка в таблице при клике меняла свой цвет, на любой

Question

var hex = '#'+Math.floor(Math.random()*16777215).toString(16);
td1.onclick = function (event) {
    td1.style.backgroundColor = hex
}

Всего ячеек 9, у каждого свой id, (td1, td2, td3...), сейчас меняется цвет только у 1 ячейки и только 1 раз. А что нужно написать, чтобы цвет менялся всегда? И у каждой ячейки, при клике на неё

Answer 1

Случайный цвет ещё можно задавать не в шестнадцатеричном, а в десятичном виде:

for(var i = 1; i <= 9; i ++){
    document.getElementById("td" + i).onclick = function(){
        var randomColor = "rgb(" + Math.random() * 256 + "," + Math.random() * 256 + "," + Math.random() * 256 + ")";
        this.style.backgroundColor = randomColor;
    }
}

Answer 2

function randomColor() {
  return '#' + (0x1000000 | Math.random() * 0x1000000).toString(16).slice(1)
}

document.querySelector('table').addEventListener('click', e => {
  var td = e.target.closest('td, th')
  td.style.backgroundColor = randomColor()
})

table, tr, td, th {
  border: 1px solid;
  border-collapse: collapse;
}

table {
  width: 100%;
}

td::after {
  content: "\A0";
}

<table>
  <tr><td><td><td><td><td><td></tr>
  <tr><td><td><td><td><td><td></tr>
  <tr><td><td><td><td><td><td></tr>
  <tr><td><td><td><td><td><td></tr>
</table>

БЛОГ НА HUSL

Как дописать код? JavaScript. Важно, чтобы ячейка в таблице при клике меняла свой цвет, на любой

Ответы (2 шт):