Jump to content

Postagens Recomendadas

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
  • 3 weeks later...
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
  • 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


×
×
  • Create New...