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

Zdrapka w js na podstawie tabeli. Odkrywanie konkretnego pola po kliknieciu.

VPS Starter Arubacloud
0 głosów
544 wizyt
pytanie zadane 17 czerwca 2018 w JavaScript przez Pasioo Nowicjusz (240 p.)

Z nudów zacząłem pisać jakąś tabelkę i doszło do tego że zacząłem robić "zdrapkę" więc uprzedzam, że sam HTML może być nieodpowiedni do tego zadania, bo nie pisałem go z myślą o dodawaniu do niego skryptu (tak tylko piszę :] )

Zrobiłem dwie tabelki, jedna nałożona na drugą. Mam gotowy skrypt losujący gdzie znajduje się wygrane pole. Problem jest taki, że nie wiem jak ukrywać kliknięte komórki tabeli. Próbowałem EventListener i zmianę opacity na 0 ale znikały mi wszystkie komórki po kliknięciu w którąkolwiek :D 

Kod HTML CSS i JS

komentarz 17 czerwca 2018 przez ScriptyChris Mędrzec (190,190 p.)

Próbowałeś z visibility: hidden?

komentarz 17 czerwca 2018 przez Pasioo Nowicjusz (240 p.)
edycja 17 czerwca 2018 przez Pasioo

Nie. Dodam, że nie wiem czy to, że dałem do body "onload" jest dobrze. Nie bardzo wiem jak ma wyglądać skrypt usuwający kliknięte pole. Czy użycie 

document.addEventListener("DOMContentLoaded", function () {   funkcja-do-ukrywania ()  {}   });

q=getElementById("a").getElementsByTagName("td");

q.addEventListener("click", // i tu cos dalej zwiazane z opacity:0 ale nie pamietam calosi

jest dobre. Ogólnie miałem jakiś pomysł ale nie działał. Ukrywał mi wszystkie <td> po kliknięciu w jeden. Nie mam niestety tego kodu który tak działał bo sobie go nie zapisałem, a nie mam już teraz siły na to, żeby go spróbować napisać tak jak wcześniej.

To co napisałem teraz jest mniej więcej tym co mi działało tak jak wcześniej pisałem.

1 odpowiedź

+1 głos
odpowiedź 17 czerwca 2018 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 17 czerwca 2018 przez Pasioo
 
Najlepsza

W JavaScript złap tabelę o id="a" i na click dodaj klikniętemu elementowi klasę np. hide:

document.getElementById('a').addEventListener('click', function(ev) {
  ev.target.classList.add('hide');
})

W CSS nadaj tej klasie styl visibility: hidden

.hide {
  visibility: hidden;
}

 

komentarz 17 czerwca 2018 przez Pasioo Nowicjusz (240 p.)

Czyli target odpowiada za złapanie tego konkretnego klikniętego pola tak? Sprawdzę to kiedy tylko przysiądę do kompurera

komentarz 17 czerwca 2018 przez Pasioo Nowicjusz (240 p.)

Dopisałem to 

document.addEventListener("DOMContentLoaded", function (){
	document.getElementById('a').addEventListener('click', function(ev) {
	ev.target.classList.add('hide');
	});
});

I teraz jeszcze jedno. Kiedy ukrywam kliknięciem <td> następne klikniecie w tym samym miejscu ukrywa mi całą tabelę z id="a", bo klikam w nią chcąc nie chcąc.

Dodałem if ale nic się nie dzieje. Błędu w konsoli też nie ma więc myślę, że sprawdzam zły warunek. Czy to ma szanse tak działać?

document.addEventListener("DOMContentLoaded", function (){
	q=document.getElementById('a');
	t=q.getElementsByTagName(q);
		if(t=="td"){
					q.addEventListener('click', function(ev) {
					ev.target.classList.add('hide');
					});
		
					};
});

I tak właściwie to dziękuję bo rozwiązanie podstawowego problemu dostałem :]

komentarz 17 czerwca 2018 przez ScriptyChris Mędrzec (190,190 p.)

Problemem jest wyższy z-index dla tabeli #a, w której komórki klikasz, żeby zniknęły. Tabela ta znajduje się "nad" tabelą z class="l". Można próbować bawić się w zmianę z-index podczas obsługi zdarzeń, ale ja bym zrobił to na jednej tabeli, gdzie oba kółka umieściłbym w jednym rzędzie i kolumnie i na akcje wykonywane myszką dynamicznie je pokazywał/ukrywał.

Podobne pytania

0 głosów
3 odpowiedzi 204 wizyt
pytanie zadane 1 maja 2018 w JavaScript przez GracjanDogg Użytkownik (840 p.)
0 głosów
0 odpowiedzi 117 wizyt
pytanie zadane 23 maja 2017 w PHP przez Zbigniew Andrysiak Bywalec (2,470 p.)
0 głosów
3 odpowiedzi 1,527 wizyt
pytanie zadane 27 listopada 2019 w JavaScript przez michal_php Stary wyjadacz (13,700 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!

...