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

AddEventLisener i click w pętli - co zrobić żeby nie nadpisywało zdarzenia?

VPS Starter Arubacloud
0 głosów
208 wizyt
pytanie zadane 16 grudnia 2017 w JavaScript przez Paweł Makarewicz Nowicjusz (210 p.)

Witam wszystkich, jestem tu nowy i od razu potrzebuje Waszej pomocy :)

Problem jest w funkcji finish(), po wywołaniu zdarzenia 'click' jest wykonywana pętla i przy drugim kliknięciu zdarzenie wykonuje się dwa razy, przy kolejnym 4, później 8 itd. Zależy mi aby po kliknięciu dane zostały odświeżone a 'click' działał jak na początku, bez obciążenia pamięci.

Jak rozwiązać problem? Będę wdzięczny za sugestie.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>bez nazwy</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.32" />
	<link rel="stylesheet" href="main.css">
</head>

<body>
	<main>
		<article>
			<div class="board">
			</div>
		</article>
	</main>
	<script src="klocki.js"></script>
	
</body>

</html>
body
{
	margin: 0;
	background-color: #26282E;
	color: #209781;
	font-size: 28px;
}

.board
{
	width: 500px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 0; /*usuwa dziwne przerwy między divami card*/
}

.card
{
	width: 115px;
	height: 115px;
	display: inline-block;
	margin: 5px;
	background: black;
}

.blank
{
	background: none;
}
var tablica = [];
var x = 4;
var i, j;
var licznik = 0;
var cardBox = '';

for (i = 0; i < x; i++)
{
	tablica[i] = [];
	for (j = 0; j < x; j++)
	{
		tablica[i][j] = licznik++;
		cardBox += '<div class="card" id="c' + licznik + '"></div>';
	}
}

document.getElementsByClassName('board')[0].innerHTML = cardBox;



var card;
var blankCard;

card = document.getElementsByClassName('card');

card[15].className = 'card blank';
	
//wyszukanie pustej karty




var moveCard;

function block() 
{
	
	blankCard = Number(document.getElementsByClassName('blank')[0].getAttribute('id').replace('c', ''));
	moveCard = [];
	//alert('blankCard() ' + blankCard.length);
	if (blankCard > x)
	{
		moveCard.push(card[(blankCard - x) - 1]);
		card[(blankCard - x) - 1].className = 'card moveDown';
	}
	if (blankCard % x != 0)
	{
		moveCard.push(card[(blankCard + 1) - 1]);
		card[(blankCard + 1) - 1].className = 'card moveLeft';
	}
	if (blankCard <= (licznik - x))
	{
		moveCard.push(card[(blankCard + x) - 1]);
		card[(blankCard + x) - 1].className = 'card moveUp';
	}
	if (blankCard % x != 1) 
	{
		moveCard.push(card[(blankCard - 1) - 1]);
		card[(blankCard - 1) - 1].className = 'card moveRight';
	}
	
	finish();
}

block();


function finish()
{
	for (i = 0; i < moveCard.length; i++)
	{
		moveCard[i].addEventListener('click', function()
		{ 
			//alert('1 ' + i);
			for (i = 0; i < card.length; i++)
			{
			//alert('2 ' + i);
				card[i].className = 'card';
				
			}
			this.className = 'card blank';
		
			block();	
			
		}, false);
	}
	
}





 

2 odpowiedzi

+2 głosów
odpowiedź 16 grudnia 2017 przez Fenix Nałogowiec (26,750 p.)

Brutalna sugestia, Dokumentacja

Multiple identical event listeners

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and they do not need to be removed manually with the removeEventListener method.

Dobra dokumentacja to taka "biblia", tam naprawdę znajdziesz odpowiedzi na większość swoich pytań. Wystarczy praktykować, inaczej idziesz na ślepo :P. 

komentarz 16 grudnia 2017 przez Paweł Makarewicz Nowicjusz (210 p.)
Oczywiście że pracuje z książką i dokumentacją, natomiast czasem warto zapytać kogoś mądrzejszego :) Dzięki
+1 głos
odpowiedź 16 grudnia 2017 przez cyklop123 Bywalec (2,790 p.)

AddEventListener różni się od innych metod przypisywania zdarzeń że można pod jeden event podpiąć więcej niż jedno zdarzenie. Dlatego polecam kod zdarzenia dać do jakiejś funkcji a potem to usuwać zdarzenie poprzednie i dodawać to co chcesz aktualnie.

przykład

function zdarzenie1(){
//coś tam
}

function zdarzenie2(){
//coś tam
}

el.addEventListener("click",zdarzenie1)   //pierwsze zdarzenie
el.addEventListener("click",zdarzenie2)   //drugie zdarzenie

//w tym momencie działają oba

el.removeEventListener("click",zdarzenie1);


//w tym momencie działa tylko drugie

 

komentarz 16 grudnia 2017 przez Paweł Makarewicz Nowicjusz (210 p.)
Dziękuje bardzo :)

Podobne pytania

0 głosów
3 odpowiedzi 351 wizyt
0 głosów
1 odpowiedź 148 wizyt
0 głosów
1 odpowiedź 158 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 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!

...