2
respostas

Problema desconhecido envolvendo a interação com DOM

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.

2 respostas

Não sei se entendi o seu problema... O que eu entendi é que você quer pintar uma li quando o botão dentro dela for clicado. Esse código aqui ajuda?

<head>
  <style>
    li {
      padding: 8px;
      background-color: #444;
      border: 1px solid #171717;
    }
  </style>
</head>
<body>
  <h1>Testando</h1>
  <ul>
    <li>
      <button data-button="btn1">Teste 1</button>
    </li>
    <li>
      <button data-button="btn2">Teste 2</button>
    </li>
    <li>
      <button data-button="btn3">Teste 3</button>
    </li>
  </ul>
</body>
<script src="./index.js"></script>
const dice = document.querySelectorAll("[data-button]");

function resetAllStyles(elements) {
  elements.forEach((element) => {
    const parentLi = element.parentElement;
    parentLi.style.backgroundColor = "#444";
    parentLi.style.borderColor = "#171717";
  });
}

dice.forEach((element) => {
  element.addEventListener("click", () => {
    resetAllStyles(dice);
    const parentLi = element.parentElement;
    parentLi.style.backgroundColor = "#171717";
    parentLi.style.borderColor = "#black";
  });
});

Oi Felipe! Tem outras coisas além de pintar a li, mas usando isso pra simplificar, eu quero que quando eu clique no botão, ele pinte sua li, e quando eu clique em outro botão, ele pinte sua li e deixe a outra li no seu estado normal. isso acontece no meu código, mas se eu tenho pintar a primeira li novamente, nada acontece. Todas elas só são pintadas só uma vez, e o que eu queria era como uma seleção de li.