3
respostas

[Dúvida] O meu botao editar nao funciona

o meu botao de editar nao funciona, me ajuda?https://drive.google.com/file/d/1Mx3f93c-qo8rQiAlxzz1pnveSXZ9QyDy/view?usp=sharing

3 respostas

Boa tarde Gisele, estou vendo somente um declaração/atribuição da function:

botaoSalvar.addEventListener("click", adicionarItem);

Onde está os EventListener do editar e excluir?

Consegue compartilhar o código completo?

Ola, ainda tenho duvidas de como fazer, irei compartilhar o codigo do script e html. Html----

Sacola de compras
  <ul id="lista-de-compras">
    <h2>Lista de compras</h2>
    <hr />
    <li>
      <div class="lista-item-container">
        <div class="container-nome-compra">
          <div class="container-checkbox">
            <label for="checkbox-1">
              <input
                type="checkbox"
                class="checkbox-input"
                id="checkbox-1"
              />
              <div class="checkbox-costumizado checked"></div>
            </label>
          </div>
          <p>Racao de gato</p>
        </div>

        <div class="icons">
          <button class="item-lista-button">
            <img src="Assets/Excluir.png" alt="Delete" />
          </button>
          <button class="item-lista-button">
            <img src="Assets/Edição.png" alt="Editar" />
          </button>
        </div>
      </div>
      <p id="item-lista-texto">Segunda-Feira (31/01/2022) as 08:30</p>
    </li>
    <a></a>
  </ul>
</main>
<script src="script.js"></script>

JS ----

const item = document.getElementById("input-item"); const botaoSalvarItem = document.getElementById("adicionar-item"); const listaDeCompras = document.getElementById("lista-de-compras");

botaoSalvarItem.addEventListener("click", adicionarItem);

function adicionarItem(evento) { evento.preventDefault(); const itemDaLista = document.createElement("li"); const containerItemLista = document.createElement("div"); containerItemLista.classList.add("lista-item-container");

const containerNomeDoItem = document.createElement("div"); const nomeDoItem = document.createElement("p"); nomeDoItem.innerHTML = item.value; containerNomeDoItem.appendChild(nomeDoItem);

const containerBotoes = document.createElement("div"); const BotaoRemover = document.createElement("button"); botaoSalvarItem.classList.add("item-lista-button"); const imagemRemover = document.createElement("img"); imagemRemover.src = "Assets/Excluir.png"; imagemRemover.alt = "Remover"; BotaoRemover.appendChild(imagemRemover); containerBotoes.appendChild(BotaoRemover);

containerItemLista.appendChild(containerNomeDoItem); containerItemLista.appendChild(containerBotoes); itemDaLista.appendChild(containerItemLista); listaDeCompras.appendChild(itemDaLista); }

Olá Gisele, vendo a imagem do drive que você disponibilizou, eu vi um erro ao colocar o nome da função, o que pode estar causando o problema. Na imagem que você forneceu, o nome da função está como: adcionarItem. E não adicionarItem, o que pode esta ocasionando no botão não encontrar esta função. Não tenho certeza se é este o problema por que não consigo ver se você colocou o nome da função corretamente no addEventListener. É sempre esses pequenos detalhes.