• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tabliczka mnożenia javascript

VPS Starter Arubacloud
0 głosów
705 wizyt
pytanie zadane 2 czerwca 2022 w JavaScript przez meazzly Nowicjusz (120 p.)

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);
}

 

1
komentarz 2 czerwca 2022 przez VBService Ekspert (251,170 p.)
edycja 3 czerwca 2022 przez VBService

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);
}

1 odpowiedź

+1 głos
odpowiedź 2 czerwca 2022 przez rafal.budzis Szeryf (85,260 p.)

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');
 

Podobne pytania

0 głosów
2 odpowiedzi 821 wizyt
pytanie zadane 28 czerwca 2022 w JavaScript przez Fajferek841 Nowicjusz (140 p.)
0 głosów
1 odpowiedź 1,469 wizyt
0 głosów
1 odpowiedź 429 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...