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

Question

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>

 

Answer 1

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
        }
    }
} );

 

Answer 2

Jest też removeAttribute.