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

Wyłączenie funkcji onclick w pętli for.

VPS Starter Arubacloud
0 głosów
544 wizyt
pytanie zadane 20 lipca 2017 w JavaScript przez Michał Pi Nowicjusz (220 p.)

Bry! 

W pętli for wykonuje się funkcja wstawiająca do klikniętego div'a (pole1-9) kolejno cyferki od 1 do 9. Problem w tym, że w jeden div można klikać cały czas. Czy można zablokować funkcję onclick diva użytego w pętli?

var i="";
var a="";
	
for (i=1;i<=9;i++)
{
	function Klik(i)
	{
		a++;
			
		if (a<=9)
		document.getElementById("pole"+i).innerHTML=a;			
		else 
		document.getElementById("up").innerHTML="Brawo";
	}
}
<p id="up">Kliknij w 9 pól</p>	

<div id="gra">

	<div id="pole1" class="pole" onclick="Klik(1)"></div>
	<div id="pole2" class="pole" onclick="Klik(2)"></div>
	<div id="pole3" class="pole" onclick="Klik(3)"></div>
	<div id="pole4" class="pole" onclick="Klik(4)"></div>
	<div id="pole5" class="pole" onclick="Klik(5)"></div>
	<div id="pole6" class="pole" onclick="Klik(6)"></div>
	<div id="pole7" class="pole" onclick="Klik(7)"></div>
	<div id="pole8" class="pole" onclick="Klik(8)"></div>
	<div id="pole9" class="pole" onclick="Klik(9)"></div>
</div>

 

2 odpowiedzi

+2 głosów
odpowiedź 20 lipca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Po co w pętli tworzysz funkcje skoro i tak w HTML podpinasz elementom handlery?

Przenieś podpinanie handlerów do JavaScript i podczep go tylko dla <div id="gra"> a numer klikniętego <div> wydobędziesz na podstawie jego ID - np. metodą match() wykorzystującą RegExp.

HTML

<p id="up">Kliknij w 9 pól</p>  
 
<div id="gra"> 
    <div id="pole1" class="pole"></div>
    <div id="pole2" class="pole"></div>
    <div id="pole3" class="pole"></div>
    <div id="pole4" class="pole"></div>
    <div id="pole5" class="pole"></div>
    <div id="pole6" class="pole"></div>
    <div id="pole7" class="pole"></div>
    <div id="pole8" class="pole"></div>
    <div id="pole9" class="pole"></div>
</div>

JavaScript

document.getElementById( 'gra' ).addEventListener( 'click', function( event ) {
    var eTarget = event.target;
    var elementId = eTarget.id;
    var elementNumber = elementId.match(/\d/g)[0]; // match() zwraca tablice wartosci, ktora szukasz przez RegExp

    // jesli element nie ma tresci, czyli nie kliknales w niego, bo taki jest jego stan przed kliknieciem
    if (!eTarget.textContent) {
        if (+elementNumber === 9) {
           document.getElementById( 'up' ).textContent = 'Brawo';
        } else {
           eTarget.textContent = elementNumber
        }
    }
} );

 

+1 głos
odpowiedź 20 lipca 2017 przez robkop Użytkownik (930 p.)
Jest też removeAttribute.

Podobne pytania

0 głosów
3 odpowiedzi 1,804 wizyt
0 głosów
2 odpowiedzi 4,463 wizyt
pytanie zadane 28 stycznia 2017 w JavaScript przez MTB Użytkownik (690 p.)
0 głosów
4 odpowiedzi 3,086 wizyt
pytanie zadane 7 listopada 2017 w JavaScript przez jking Początkujący (350 p.)

92,830 zapytań

141,771 odpowiedzi

320,817 komentarzy

62,159 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

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!

...