Javascript onClick picks the wrong element?-CodePudding

    for(let x = 0; x < 10; x  ){container_For_Dices.push(Math.round(Math.random()*10))}
let Ids  = ["Dice1","Dice2","Dice3","Dice4","Dice5","Dice6","Dice7","Dice8","Dice9","Dice10"]
let id = -1
container_For_Dices= container_For_Dices.map((value=>{
    id  =1
    return(
        <button
         className="w-20 h-20 m-2 rounded-lg bg-slate-300 content-center pt-4 shadow shadow-gray-500 text-4xl font-bold dices"
         id={Ids[id]}
         onClick={()=>{
            var element = document.getElementById(`${Ids[id]}`)
            element.classList.remove("dices")
            element.style.backgroundColor = "rgba(255,255,255,0.5)"
            }} >
            {value}
        </button>
    )
}))

The problem is definitely in the onClick part, but I have no clue how to fix it. If I click on one of the elements, the 10th element gets picked. I already checked that every element got the correct id...

CodePudding user response：

Try passing event argument onClick={(e)=>{ and extract element from event var element = e.target;

<button
         className="w-20 h-20 m-2 rounded-lg bg-slate-300 content-center pt-4 shadow shadow-gray-500 text-4xl font-bold dices"
         id={Ids[id]}
         onClick={(e)=>{
            var element = e.target;
            element.classList.remove("dices")
            element.style.backgroundColor = "rgba(255,255,255,0.5)"
            }} >

CodePudding user response：

Uh, i think i got it XD. at the time I click on the Element, the id is already 9...