¿Por qué var a = e.target.innerText no funciona pero si configuro var a = e.target y luego hago if(a.innerText == "") funciona? Aquí hay un JS Fiddle de mi código y un fragmento a continuación:
let boxes = document.querySelectorAll(".boxes"); const turn = "X"; boxes.forEach((e) => { e.addEventListener("click", (e) => { var a = e.target.innerText; if (a == "") { a = turn; } }); }); * { box-sizing: border-box; padding: 0; margin: 0; } .main-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .boxes { display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px; border: 2px solid black; margin: 4px; font-size: 3em; vertical-align: bottom; } <div class="main-container"> <div class="container"> <div class="boxes"></div> <div class="boxes"></div> <div class="boxes"></div><br> <div class="boxes"></div> <div class="boxes"></div> <div class="boxes"></div><br> <div class="boxes"></div> <div class="boxes"></div> <div class="boxes"></div> </div> </div>La pregunta dice:
¿Por qué var a = e.target.innerText no funciona pero si configuro var a = e.target y luego hago if(a.innerText == "") [sí]
e.target te da un elemento.
e.target.innerText le da el texto interno del elemento e.target. Es texto, no es en sí mismo una referencia a ese texto.
Entonces, cuando establece la variable JS a = e.target.innerText y luego establece a = 'X', es la variable JS la que se establece en ese texto, no el texto interno del elemento.
Puede ayudar (o puede agregar confusión, no estoy seguro) leer sobre la llamada por referencia versus el valor, etc., por ejemplo, en ¿JavaScript es un lenguaje de paso por referencia o paso por valor?
En vez de
if (a == "") { a = turn; }deberías hacer
if (a == "") { e.target.innerText = turn; }Es porque var a = e.target.innerText; obtiene solo la cadena dentro del elemento <div class="boxes"></div> y la asigna a la variable 'a', entonces solo está cambiando la variable 'a' en lugar de cambiar el texto interno del div .
Entonces, var a = e.target funciona porque obtiene el elemento en lugar de solo la cadena. Luego puedes cambiar el texto interno del div con,
if (a.innerText == "") { a.innerText = turn; }