Pessoal,
Como corrigir erro ao adicionar produtos dinamicamente ao carrinho usando JavaScript?
O erro:
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.');
}
});
});