bonomo Postado Sábado às 01:07 Compartilhar Postado Sábado às 01:07 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"></div> <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.'); } }); }); erro: Não sei o motivo desse erro, já tentei tudo, alguém me ajuda Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Postagens Recomendadas
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.
Criar minha conta agoraÉ bem rápido!
Entrar
Você já tem uma conta?
Entrar agoraFaça o login agora.