Jump to content

Como corrigir erro ao adicionar produtos dinamicamente ao carrinho usando JavaScript?

bonomo

Por bonomo
em JavaScript

 Compartilhar

Postagens Recomendadas

bonomo

bonomo

Postado
Postado

 Pessoal,

Como corrigir erro ao adicionar produtos dinamicamente ao carrinho usando JavaScript?

O erro:

image.png

Não sei o motivo desse erro, já tentei tudo, alguém me ajuda.

Seguem os códigos: 

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Loja Virtual</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="carrinho.html">Carrinho</a></li>
            </ul>
        </nav>
    </header>
    <div class="card">
        <div id="produto1">
            <img class="imgProduto" src="2022-03-06.png" alt="Imagem do produto">
            <div class="card-body">
                <h2 class="nomeProduto">Nome do produto</h2>
                <p class="descricaoProduto">Descrição do produto</p>
                <p class="precoProduto">R$ 100,00</p>
                <button class="btn">Adicionar ao carrinho</button>
            </div>
        </div>
        <div id="produto2">
            <img class="imgProduto" src="2022-03-06.png" alt="Imagem do produto">
            <div class="card-body">
                <h2 class="nomeProduto">Nome do produto</h2>
                <p class="descricaoProduto">Descrição do produto</p>
                <p class="precoProduto">R$ 100,00</p>
                <button class="btn">Adicionar ao carrinho</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

  

<!-- carrinho.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="produto"></div>
    <div id="containerProdutos">
        <!-- Produtos adicionados aparecerão aqui -->
    </div>
    <script src="script.js"></script>
</body>
</html>


  

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementsByClassName('btn')[0];
    const imgProduto = document.getElementsByClassName('imgProduto');
    const nomeProduto = document.getElementsByClassName('nomeProduto');
    const descricaoProduto = document.getElementsByClassName('descricaoProduto');
    const precoProduto = document.getElementsByClassName('precoProduto');
    const produto1 = document.getElementById('produto1');
    const produto2 = document.getElementById('produto2');
    const containerProdutos = document.getElementById('containerProdutos');

    btn.addEventListener('click', () => {
        const produtoDiv = document.createElement('div');
        produtoDiv.className = 'produto';

        const img = document.createElement('img');
        img.src = imgProduto[0].src;
        produtoDiv.appendChild(img);

        const nome = document.createElement('p');
        nome.textContent = nomeProduto[0].textContent;
        produtoDiv.appendChild(nome);

        const descricao = document.createElement('p');
        descricao.textContent = descricaoProduto[0].textContent;
        produtoDiv.appendChild(descricao);

        const preco = document.createElement('p');
        preco.textContent = precoProduto[0].textContent;
        produtoDiv.appendChild(preco);

        console.log(produtoDiv);
        console.log(nomeProduto[0]);
        console.log(descricaoProduto[0]);
        console.log(precoProduto[0]);

        if (containerProdutos) {
            containerProdutos.appendChild(produtoDiv);
        } else {
            console.error('Elemento com o ID "containerProdutos" não encontrado.');
        }
    });
});

 

  • Curtir 2
Link to comment
Compartilhe em outros sites
  • 3 weeks later...
Ryan Zimerman Leite

Ryan Zimerman Leite

Postado
Postado

@bonomo 

O erro Elemento com o ID "containerProdutos" não encontrado está ocorrendo porque o script está tentando acessar o containerProdutos antes da página correta ser carregada. Isso ocorre porque o containerProdutos só existe em carrinho.html, mas o script script.js está sendo executado em ambas as páginas (index.html e carrinho.html). Como resultado, quando o código é executado na index.html, ele não encontra o containerProdutos.

Para corrigir isso, você pode adicionar uma verificação no script.js para garantir que o código que manipula containerProdutos seja executado apenas na carrinho.html. Veja como ajustar o código: 

document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementsByClassName('btn')[0];
    const imgProduto = document.getElementsByClassName('imgProduto');
    const nomeProduto = document.getElementsByClassName('nomeProduto');
    const descricaoProduto = document.getElementsByClassName('descricaoProduto');
    const precoProduto = document.getElementsByClassName('precoProduto');
    const produto1 = document.getElementById('produto1');
    const produto2 = document.getElementById('produto2');

    // Só busca o elemento containerProdutos se ele existir na página atual
    const containerProdutos = document.getElementById('containerProdutos');
    
    // Verifica se o botão existe antes de adicionar o evento
    if (btn) {
        btn.addEventListener('click', () => {
            const produtoDiv = document.createElement('div');
            produtoDiv.className = 'produto';
    
            const img = document.createElement('img');
            img.src = imgProduto[0].src;
            produtoDiv.appendChild(img);
    
            const nome = document.createElement('p');
            nome.textContent = nomeProduto[0].textContent;
            produtoDiv.appendChild(nome);
    
            const descricao = document.createElement('p');
            descricao.textContent = descricaoProduto[0].textContent;
            produtoDiv.appendChild(descricao);
    
            const preco = document.createElement('p');
            preco.textContent = precoProduto[0].textContent;
            produtoDiv.appendChild(preco);
    
            console.log(produtoDiv);
            console.log(nomeProduto[0]);
            console.log(descricaoProduto[0]);
            console.log(precoProduto[0]);
    
            // Adiciona o produto ao container se ele existir
            if (containerProdutos) {
                containerProdutos.appendChild(produtoDiv);
            } else {
                console.error('Elemento com o ID "containerProdutos" não encontrado.');
            }
        });
    }
});

1 - O código só tenta acessar containerProdutos se ele realmente existir.

2 - O evento click no botão btn só será adicionado se o botão estiver presente na página atual.

Dessa forma, o erro não ocorrerá na index.html, e o containerProdutos será manipulado corretamente na carrinho.html.

  • Curtir 1
Link to comment
Compartilhe em outros sites
  • Casa do Desenvolvedor mudou o título para Como corrigir erro ao adicionar produtos dinamicamente ao carrinho usando JavaScript?

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...