modify function input through for loop javascript-CodePudding

I have a series of buttons with some names on them; when a button is clicked the name on it is added in a list. This last operation is done by a function which takes as input the id of the button. When I write all that stuff explicitly all works fine:

<!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>

I would like to use a for loop in order to set the names on the buttons and calling the addinv function. For that I changed the function location0 as follows:

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

Now buttons still have the right name on them, but the addinv function does not work properly: it seems to me that all buttons calls addinv(4)

CodePudding user response：

Try to replace the for-loop as below:

for (let i=1; i<4; i  ) {
   document.getElementById(i).innerHTML=equip[i-1]
   document.getElementById(i).addEventListener("click",()=>{addinv(i)});
}

I attached a sample code for your reference.

CodePudding user response：

<!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>