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

Krótki kod JS który powinien działać

VPS Starter Arubacloud
+2 głosów
169 wizyt
pytanie zadane 4 października 2021 w JavaScript przez StaramSieJakMoge Początkujący (310 p.)

Hej stworzyłem w JS krótkie funkcje które miały kolorować wiersze w tabeli ale z jakiegoś powodu nie chcą zadziałać. Docelowo ma się kolorować co drugi wiersz ale póki co nie działa nawet w tej formie. Z góry bardzo dziękuję.

function load() {
  text_color = document.getElementByID('color-picker');
  text_color.addEventListener('change', ColorChange, false);



}

function ColorChange() {
  var color = text_color.value;
  const table = document.getElementById('tabelka');
  const rows = table.getElementsByTagName('td');


  for(var i = 0; i < rows.lenght; i++) {
    rows[i].style.background= color;
  }
}

 

3 odpowiedzi

+1 głos
odpowiedź 4 października 2021 przez VBService Ekspert (251,210 p.)
edycja 4 października 2021 przez VBService

Masz literówkę, wink 

rows.lenght  --}  rows.length 

Docelowo ma się kolorować co drugi wiersz

jeżeli chcesz wiersze kolorować, to lepiej użyć tr zamiast td

const rows = table.getElementsByTagName('tr');

 

nie jest to wymagane, ale możesz "doprecyzować" jaki styl chcesz "ustawiać"

rows[i].style.backgroundColor = color;

 

Nie widać całego kodu js-a, jeżeli ta zmienna text_color, która "przechowuje" element DOM nie jest globalna to w funkcji ColorChange() użycie jej zwróci błąd

Uncaught ReferenceError: text_color is not defined

ponieważ przypisanie do niej elementu DOM

text_color = document.getElementById('color-picker');

następuje w funkcji load() i w ten sposób jest tylko "widziana" w tej funkcji (zmienna lokalna).

 

ponieważ funkcja ColorChange() w Twoim kodzie jest wywoływana ze "zdarzenia"

text_color.addEventListener('change', ColorChange, false);

to możesz zastosować "e"

what does (e) mean?

 

e is the short var reference for event object which will be passed to event handlers.

The event object essentially has lot of interesting methods and properties that can be used in the event handlers.

wtedy funkcja może "przybrać wygląd"

function ColorChange(e) {
  const color = e.target.value;
  const table = document.getElementById('tabelka');
  const rows = table.getElementsByTagName('tr');
  
  for (let i = 0; i < rows.length; i++) {
    rows[i].style.backgroundColor = color;
  }
}

 

1
komentarz 4 października 2021 przez StaramSieJakMoge Początkujący (310 p.)
Bardzo dziękuję, śpieszę się z projektem i jestem już po prostu zmęczony dlatego pomijam oczywiste literówki,
+1 głos
odpowiedź 4 października 2021 przez krissto7 Gaduła (3,100 p.)
Jeśli chcesz co drugi wiersz to w warunku for możesz i++ zamienić na i = i +2 lub i+= 2.

Tu masz literówke document.getElementByID('color-picker'); zamień na document.getElementById('color-picker');

oraz w rows.lenght na rows.length.

Dodatkowo brak deklaracji zmiennej const/let/var w funkcji load, no chyba , że to jest deklaracja i nadpisujesz(brak całości kodu więc można się jedynie domyślać).

text_color.value w funkcji ColorChange jest nie zdefiniowane ponieważ zadeklarowałeś zmienną w innym scopie , więc z poziomu tej funkcji nie da się odczytać zawartości , propozycja to przenieś text_color = document.getElementById('color-picker') do scopu globalnego , ewentualnie przy wywołaniu funkcji ColorChange możesz wywołać tę funkcje z argumentem w postaci tej zmiennej , czyli () => ColorChange(text_color);
+1 głos
odpowiedź 4 października 2021 przez qax Dyskutant (8,060 p.)

Można też tak:

<input type="color" id="color-picker" />
<table id="table">
<tr><td>1x1</td><td>1x2</td></tr>
<tr><td>2x1</td><td>2x2</td></tr>
<tr><td>3x1</td><td>3x2</td></tr>
<tr><td>4x1</td><td>4x2</td></tr>
<tr><td>5x1</td><td>5x2</td></tr>
<tr><td>6x1</td><td>6x2</td></tr>
<tr><td>7x1</td><td>7x2</td></tr>
</table>
const colorPicker = document.getElementById('color-picker');
const table = document.getElementById('table');
const rows = table.querySelectorAll('tr');
colorPicker.addEventListener('change', colorChange, false);

function colorChange() {
	let color = colorPicker.value;
  for(let i = 0; i < rows.length; i++) {
  	if (i % 2 === 0) {
    	rows[i].style.background= color;
    }
  }
}

 

1
komentarz 4 października 2021 przez VBService Ekspert (251,210 p.)

Skoro mamy w użyciu querySelectorAll to można się pokusić o taki zapis wink

const colorPicker = document.getElementById('color-picker');
const table_rows = document.querySelectorAll('#table tr:nth-child(even)');
colorPicker.addEventListener('change', colorChange, false);
 
function colorChange() {
  const color = colorPicker.value
  for (const row of table_rows)
    row.style.backgroundColor = color;
}

 

1
komentarz 4 października 2021 przez qax Dyskutant (8,060 p.)

Czyli możliwości od groma wink

Podobne pytania

0 głosów
1 odpowiedź 124 wizyt
0 głosów
1 odpowiedź 188 wizyt
pytanie zadane 15 grudnia 2015 w C i C++ przez martix3 Użytkownik (690 p.)
0 głosów
1 odpowiedź 282 wizyt
pytanie zadane 21 lipca 2021 w C i C++ przez Daaa22 Dyskutant (8,250 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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!

...