Tabliczka mnożenia javascript

Question

Witam, potrzebuje do mojej tabliczki mnożenia 100x100 dodać tak żeby każde pole tabelki miało tło w losowo wybranym kolorze. Pomoże ktoś? Coś napisałem ale nie do końca działa tak jak  powinno

const table = document.getElementById('obszar');
const rnd = () => Math.floor(Math.random() * 256);
for (let y = 1; y <= 100; y++) {
   const tr = document.getElementById('tr');
   for (let x = 1; x <= 100; x++) {
       const td = document.getElementById('td');
       td.innerText = y * x;
       tr.appendChild(td);
       td.style.background = `rgb(${rnd()}, ${rnd()}, ${rnd()})`;
   }
   table.appendChild(tr);
}

 

Comments

Czasem liczba jest niewidoczna na ciemnym tle

proponuje np. taki zapis aby to nieco poprawić

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  font: 400 1em system-ui;
}

window.onload = _=> {
  const table = document.createElement('table');
  const rnd = _=> Math.floor(Math.random() * 256),
        contrastColor = (r, g, b) => ((r*0.299 + g*0.587 + b*0.114) > 189) ? 'black' : 'white';

  for (let row=1; row<=100; row++) {
    const tr = document.createElement('tr');
    for (let col=1; col<=100; col++) {
      const r = rnd(), g = rnd(), b = rnd();
      const td = document.createElement('td');
      td.textContent = row*col;
      td.style.background = `rgb(${r}, ${g}, ${b})`;
      td.style.color = contrastColor(r, g, b);
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }

  document.body.appendChild(table);
}

Answer 1

Wszystko działa jeśli zaczniesz tworzyć tr i td zamiast wyszukiwać po id ;) Zakładam że autocomplete źle podpowiedział ;) 

const tr = document.getElementById('tr');
const tr = document.createElement('tr');