JavaScript zmiana koloru komórki po kliknięciu. Pomocy!

Question

Witam. Mam problem. Dostałem za zadanie stworzyć stronę z elementami JS. Wszystko ładnie, pięknie ale mam problem z jedną rzeczą.

Muszę napisać skrypt dzięki któremu po kliknięciu na tekst w komórce tabeli zmieni kolor jej tła. Mógłby mi ktoś podpowiedzieć co należy zrobić aby to działało poprawnie? P.S. Dopiero się uczę pisania skryptów więc proszę o wyrozumiałość.

JS

  const tab = document.getElementById('tabelka');
  const td = tab.getElementsByTagName('td');
  for (let i=0; i<td.lenght; i++)
  {
    td[i].style.backgroundColor = "red";
    td[i].style.color = "yellow";
  }

 
HTML

<table id="tabelka">
    <tr>
      <td class="czarny">Czarny</td> <td id="czerwony"> Czerwony </td>
    </tr>
    <tr>
      <td class="zolty">Żółty</td> <td class="niebieski"> Niebieski </td>
    </tr>
    <tr>
      <td class="fioletowy">Fioletowy</td> <td class="bialy"> Biały </td>
    </tr>
  </table>

Comments

a gdzie jest addEventListener()?

Answer 1

Możesz zrobić to z pomocą pętli, która ustawi działanie po kliknięciu (onclick).
Pętlę możesz zrobić na dwa sposoby:

Tak jak wyżej

var td = document.querySelectorAll("td"); // Możesz użyć swojego sposobu pobierania elementów
for (let i=0; i<td.lenght; i++) {
td[i].onclick = function () {
// Kod zmiany koloru
};
}

Lub drugim, nieco krótszym

var td = document.querySelectorAll("td"); // Możesz użyć swojego sposobu pobierania elementów
td.forEach(function (e) { // e -> element
e.onclick = function () {
// Kod zmiany koloru
};
});

Przy definiowaniu kolorów możesz skożystać z ułatwienia jakim jest zmienna this. Pozwala ona na zmienienie wartości elementu na którym wywołano funkcję.
Pomyśl jeszcze nad funkcją zmiany kolorów na poprzednie przycisku jeśli kliknąłeś inny.

Answer 2

Wstaw kod w odpowiednie bloczki używając opcji edytora {...}

Jeżeli chodzi o Twoje pytanie to wystarczy nasłuchiwać zdarzenia click na elemencie tab, który pobrałeś. target obiektu zdarzenia to kliknięty element wewnątrz tab, więc kliknięta komórka tabelki. Należy się tylko zabezpieczyć przed kliknięciem samego table, co załatwi odfiltrowanie id="tabelka" za pomocą if()

Answer 3

Ludzie on dopiero się uczy Więc nie sądzę żeby zrozumiał addEventListener nawet nie mówiąc o tym że pewnie nie miał tego na lekcji. Tekst w komórkach umieść w jakimś znaczniku, np <p></p> i dodaj do tego znacznika zdarzenie onclick czyli bedzie to wyglądało tak: <p onclick='zmien("KOLOR", idKomorki)>napis</p> (zamiast KOLOR zmień na angielską nazwę koloru.

Teraz w js tworzysz funkcje zmien(k,element) i w funkcji piszesz document.getElementById(element).style.backgroundColor = k;

 

Jeśli o to ci chodziło to chyba tyle (o ile autokorekta czegos nie zmieniła)

Comments

Ludzie on dopiero się uczy Więc nie sądzę żeby zrozumiał addEventListener nawet nie mówiąc o tym że pewnie nie miał tego na lekcji

...zależy od kolejności? Czasem uczy się tylko addEventListener i w ogóle nie dotyka onclick.

(Tym bardziej, że na stronach z ostrym security policy w ogóle przeglądarka nie pozwala na <p onclick='...kod...'> i jedyną opcją jest addEventListener.)

---

Założę się, że jest w technikum a program nauczania wszędzie mniej więcej taki sam i tego nie miałem a onclick już miałem

---

Powiedziałbym nawet, że należy uczyć tylko addEventListener, a onclick pokazać i powiedzieć, że tak robić nie wolno. Założenie z góry, że ktoś dopiero co się uczy i dlatego trzeba mu podać kompletnie złe rozwiązanie, wydaje się co najmniej dziwne. A program technikum nikogo nie obchodzi. Jakby iść programem szkół to nawet nie chcę myśleć jak źle wszyscy wokół by programowali. Programowanie to nauka własna.

Chyba że podchodzimy do sprawy tak, aby tylko napisać coś co zadziała i zaliczyć zadanie w technikum. Zakładam jednak, że chce się czegoś naprawdę nauczyć.

---

To, że ktoś się uczy, nie oznacza, że należy mu pokazywać najgorsze, przestarzałe i niepolecane rozwiązania. Poza tym powtarzanie jak mantrę, że uczący się nie zrozumieją podstaw jest dla mnie jednoznaczne z traktowaniem ich jak ćwierćinteligentów.

---

Powiedziałbym nawet, że należy uczyć tylko addEventListener, a onclick pokazać i powiedzieć, że tak robić nie wolno.

Z tym "nie wolno" bym aż tak nie przesadzał. A co, jeśli taka osoba trafi do projektu legacy, gdzie są tylko onclick'i? Pewnie ktoś z zespołu go naprostuje, ale moim zdaniem lepiej wytłumaczyć wszystkie możliwości, pokazać ich zalety oraz wady i wtedy określić, że jednych lepiej nie używać. Czasami jednak i tych zdeprecjonowanych lub uznanych za złe trzeba użyć, bo inne nie zadziałają lub spowodują zaburzenie spójności kodu, choćby ze względu na nietypowe środowisko działania aplikacji lub bardzo stary projekt.

---

A ile juniorów trafia do projektów legacy? Trochę nie rozumiem popularności tego argumentu – normalnie jakby 90% projektów w webdevie to było legacy…

---

@JSHolic, osobiście wolałbym uczyć wszystkich że "nie wolno", a jak ktoś trafi do takiego projektu to wtedy tam się dowie, że w takich specyficznych przypadkach się zdarza. Ale generalnie nie wolno i dopóki tam nie trafi (albo sam się tematem szerzej nie zainteresuje) będzie miał zakodowane, że tego się nie używa.

---

Nie wiem czy jest jakaś reguła - może poziom skomplikowania projektu. Ale z drugiej strony dlaczego Junior nie może tam trafić? Jeśli spełnia wymagania i jest zapotrzebowanie to chyba nic nie stoi na przeszkodzie.

Ja od Seniorów często słyszę, że w większych firmach łatwiej trafić na legacy projekt (zwłaszcza w outsourcingu), bo im większy klient tym bardziej zależy mu na stabilności oprogramowania i supporcie niż żeby cisnąć w nowości.