Salve a tutti,
da poco sto studiando Javascript e per esercitarmi sto cercando di replicare il gioco della dama.
Creata la scacchiera con e senza pedine ora devo sviluppare i "movimenti".
Inizialmente ho pensato di creare delle funzioni onclick con parametro ID della casella che mi permettano con elem.classList.toggle e elem.classList.add di modificare la classe del div (che andrà quindi a prendere delle diverse regole css), ma in questo caso la funzione onClick nel div non cambia.
Ho provato quindi a utilizzare innerHTML per modificare l'intera struttura del DIV ma invece di sostituirmelo in toto, mi attacca il nuovo div sotto al div che dovrebbe eliminare.
Avete soluzioni in merito senza utilizzare jQuery?
<body>
<div class="dama">
<div class="caselleNere" id="A8"></div>
<div class="caselleBianche_ConPedinaBianca" id="B8" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="C8"></div>
<div class="caselleBianche_ConPedinaBianca" id="D8" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="E8"></div>
<div class="caselleBianche_ConPedinaBianca" id="F8" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="G8"></div>
<div class="caselleBianche_ConPedinaBianca" id="H8" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleBianche_ConPedinaBianca" id="A7" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="B7"></div>
<div class="caselleBianche_ConPedinaBianca" id="C7" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="D7"></div>
<div class="caselleBianche_ConPedinaBianca" id="E7" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="F7"></div>
<div class="caselleBianche_ConPedinaBianca" id="G7" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="H7"></div>
<div class="caselleNere" id="A6"></div>
<div class="caselleBianche_ConPedinaBianca" id="B6" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="C6"></div>
<div class="caselleBianche_ConPedinaBianca" id="D6" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="E6"></div>
<div class="caselleBianche_ConPedinaBianca" id="F6" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleNere" id="G6"></div>
<div class="caselleBianche_ConPedinaBianca" id="H6" onclick="casellaEvidenziataClick_PedineBianche(this.id)"></div>
<div class="caselleBianche_SenzaPedina" id="A5"></div>
<div class="caselleNere" id="B5"></div>
<div class="caselleBianche_SenzaPedina" id="C5"></div>
<div class="caselleNere" id="D5"></div>
<div class="caselleBianche_SenzaPedina" id="E5"></div>
<div class="caselleNere" id="F5"></div>
<div class="caselleBianche_SenzaPedina" id="G5"></div>
<div class="caselleNere" id="H5"></div>
<div class="caselleNere" id="A4"></div>
<div class="caselleBianche_SenzaPedina" id="B4"></div>
<div class="caselleNere" id="C4"></div>
<div class="caselleBianche_SenzaPedina" id="D4"></div>
<div class="caselleNere" id="E4"></div>
<div class="caselleBianche_SenzaPedina" id="F4"></div>
<div class="caselleNere" id="G4"></div>
<div class="caselleBianche_SenzaPedina" id="H4"></div>
<div class="caselleBianche_ConPedinaNera" id="A3" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="B3"></div>
<div class="caselleBianche_ConPedinaNera" id="C3" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="D3"></div>
<div class="caselleBianche_ConPedinaNera" id="E3" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="F3"></div>
<div class="caselleBianche_ConPedinaNera" id="G3" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="H3"></div>
<div class="caselleNere" id="A2"></div>
<div class="caselleBianche_ConPedinaNera" id="B2" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="C2"></div>
<div class="caselleBianche_ConPedinaNera" id="D2"onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="E2"></div>
<div class="caselleBianche_ConPedinaNera" id="F2" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="G2"></div>
<div class="caselleBianche_ConPedinaNera" id="H2" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleBianche_ConPedinaNera" id="A1" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="B1"></div>
<div class="caselleBianche_ConPedinaNera" id="C1" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="D1"></div>
<div class="caselleBianche_ConPedinaNera" id="E1" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="F1"></div>
<div class="caselleBianche_ConPedinaNera" id="G1" onclick="casellaEvidenziataClick_PedineNere(this.id)"></div>
<div class="caselleNere" id="H1"></div>
</div>
<script src="../dama/dama2.js"></script>
</body>
function casellaEvidenziataClick_PedineBianche(id) {
let casellaCliccata = document.getElementById(id);
casellaCliccata.innerHTML = `<div class="caselleBianche_ConPedinaBianca_Selezionata" id="${id}"></div>`
}