two onclick events in the same loop

Question

hello. I am taking the first steps in javascript and have a question for which I have not yet found an answer that I really understand.

I’m trying to interact add a click function and a reset function to 3 buttons using the same loop but it only works if I have a loop for each function. I can’t understand why I can’t use the same.

Thank you

ex:

var buttons = document.querySelectorAll("#game button");
var resetbtn =document.getElementById("reset");
var symbol = "X";
			
				
for(var i = 0 ; i < 3 ; i++ )   { 

					buttons[i].onclick = function(){
					
						if(this.textContent == ""){
						
							this.textContent = symbol; 
							
							if(symbol=="X"){
								symbol= "0";
							
							}
							else{
								symbol = "X";
							}
							
						}

						
					}

					function reset(){
						//for(var j = 0; j<3; j++){   --> so quando eu altero a variavel abaixo para a do novo loop - J -  é que funciona

							buttons[i].textContent = "";
						}
					}
				
				
					resetbtn.onclick = function(){
						reset();
					}	
				}

<div id="game">
			<button type="button"></button>
			<button type="button"></button>
			<button type="button"></button>
		</div>
		<div>
			<button id="reset" type="button">reset</button>
		</div>

Answer 1

When creating the function reset() within the loop, and it is superscripted resulting in the variable i at the last value after the for have finished, that is to say, i will equal 3, soon, buttons[i] (or buttons[3]) result in error because there is no index button 3 (the maximum is buttons[2]).

When the loop is finished, the value of the control variable i will be the next value defined in i++ according to the condition i < 3, that is, the value of i will be 2+1=3. With that the function reset() will be buttons[3].textContent = "";. And since there are only three buttons on var buttons = document.querySelectorAll("#game button");, the code will throw the error:

Cannot set Property 'textContent' of Undefined

When you wear a new one for within the function reset() (independent of the variable being j) you are creating a new routine that will work normally.

In short, you should not create a single function within a loop, because rotating the loop one will overwrite the other, and you will not be able to reuse the variable i in this context. Both the function reset() as to resetbtn.onclick should be out of the loop for.