Tengo una serie de botones con algunos nombres; cuando se hace clic en un botón, se agrega el nombre en una lista. Esta última operación la realiza una función que toma como entrada el id del botón. Cuando escribo todo eso explícitamente, todo funciona bien:
<!DOCTYPE html> <html> <head> <script> inventory=[] function addinv(variable) { item=document.getElementById(variable).innerHTML if (item!='Ok') { if (inventory.length<2){ inventory.push(item) document.getElementById(variable).innerHTML='Ok' } } } function location0() { document.getElementById("1").innerHTML="Spada" document.getElementById("1").setAttribute('onclick','addinv(1)') document.getElementById("2").innerHTML="Corda" document.getElementById("2").setAttribute('onclick','addinv(2)') document.getElementById("3").innerHTML="Acciarino" document.getElementById("3").setAttribute('onclick','addinv(3)') } </script> </head> <body> <button type="button" id="1" onclick=""></button> <button type="button" id="2" onclick=""></button> <button type="button" id="3" onclick=""></button> <script>location0()</script> </body> </html>Me gustaría usar un bucle for para establecer los nombres en los botones y llamar a la función addinv. Para eso cambié la función location0 de la siguiente manera:
function location0() { equip=["Spada", "Corda", "Acciarino"] for (i=1; i<4; i++) { document.getElementById(i).innerHTML=equip[i-1] document.getElementById(i).setAttribute('onclick','addinv(i)') } }Ahora los botones aún tienen el nombre correcto, pero la función addinv no funciona correctamente: me parece que todos los botones llaman a addinv(4)
Intente reemplazar el bucle for como se muestra a continuación:
for (let i=1; i<4; i++) { document.getElementById(i).innerHTML=equip[i-1] document.getElementById(i).addEventListener("click",()=>{addinv(i)}); }Adjunté un código de muestra para su referencia.
En lugar de pasar la identificación a addinv() , sugeriría pasar una referencia al elemento. Así que modifiqué ligeramente location0() y la llamada a addinv() .
function location0() { const equip=["Spada", "Corda", "Acciarino"] for (let i=0; i<equip.length; i++) { let item = document.getElementById(i+1) item.innerHTML = equip[i]; item.setAttribute('onclick', 'addinv(this)') } } Luego cambie addinv() a esto. Esto debería funcionar.
function addinv(item) { let text = item.innerHTML; if (text != 'Ok') { if (inventory.length < 3) { inventory.push(text) item.innerHTML = 'Ok' } } } <!DOCTYPE html> <html> <head> <script> inventory=[] function addinv(variable) { item=document.getElementById(variable).innerHTML if (item!='Ok') { if (inventory.length<3){ inventory.push(item) document.getElementById(variable).innerHTML='Ok' } } } function location0() { document.getElementById("1").innerHTML="Spada" document.getElementById("1").setAttribute('onclick','addinv(1)') document.getElementById("2").innerHTML="Corda" document.getElementById("2").setAttribute('onclick','addinv(2)') document.getElementById("3").innerHTML="Acciarino" document.getElementById("3").setAttribute('onclick','addinv(3)') } </script> </head> <body> <button type="button" id="1" onclick=""></button> <button type="button" id="2" onclick=""></button> <button type="button" id="3" onclick=""></button> <script>location0() </script> </body> </html>