Eu fiz uma lista e o conteúdo de cada item é cercado por uma borda em toda a li. Dentro de cada li tem um botão, todos com o mesmo data. Minha intenção é que, quando o botão for clicado, a cor de fundo da li e cor da borda mude, e o conteúdo dentro dela seja alterado para outro especificado. Quando outro botão for apertado, quero que aconteça o mesmo com sua respectiva li, e a li anterior retorne ao estado inicial.
Para isso, criei a variável let inUse = false;
que é alterada para true quando o botão é clicado, e a variável let listKeeper = "";
que muda para conter o estado inicial da li em questão.
Porém, estou tendo um problema e não consigo identificar exatamente por que ele ocorre. Quando clico em um botão, sua li muda normalmente, e quando clico em outro botão, a outra li muda e a primeira é alterada pro estado inicial, tudo dentro dos conformes. Porém, se eu clicar novamente no primeiro botão, nada acontece. Esse comportamento se repete em todas as li. Basicamente, elas estão mudando conforme o esperado, porém só mudam uma vez. Já imaginei ser um problema no NodeList criado, pensei que após o botão sumir e aparecer novamente com as mudanças (ele é excluído também), ele saísse do NodeList. Mas com uns console.log pude ver que a lista se mantém durante todo o decorrer do código. Já tentei inúmeras soluções, até criei outros problemas enquanto tentava resolver akakssakas, mas sem sucesso.
Segue o código abaixo:
import Options from "./options.js"
let inUse = false;
let listKeeper = "";
const dice = document.querySelectorAll('[data-button]') // Captura os botões
const liDice = document.querySelectorAll('[data-die]') // Captura as li
dice.forEach(element => {
element.addEventListener('click', ()=> {
if(inUse == false) {
changeToOptions(element);
} else {
const optionsList = document.getElementsByClassName('options-dice')[0]; // Encontra no DOM o conteúdo alterado
const dieItem = optionsList.parentElement; // Captura a li do conteúdo alterado
dieItem.removeChild(optionsList);
dieItem.style.backgroundColor = "#444444";
dieItem.style.borderColor = "#171717";
dieItem.innerHTML = listKeeper;
changeToOptions(element);
}
})
});
const changeToOptions = (element)=> {
inUse = true;
listKeeper = element.parentElement.innerHTML;
const listMap = parseInt(element.parentElement.id); // Defini o ID de cada li como sua respectiva posição na const dice
console.log(listKeeper)
liDice[listMap].style.backgroundColor = "#171717";
liDice[listMap].style.borderColor = "black";
Options(parseInt(element.id), element);
}
Options é responsável por adicionar o conteúdo alterado, não tem relação com esse problema.