Problema ao aplicar função Onclick para elementos individuais

Front-end
#1

Boa tarde, sou iniciante em JavaScript e estou tentando criar a seguinte funcionalidade simulando um ‘Carrinho de Compras’, ao clicar no botão de qualquer produto ‘Adicionar ao Carrinho’, preciso que o código pegue o produto o qual eu cliquei e liste ele no fim da página (a principio apenas o nome do produto que foi clicado).

Captura de Tela 2017-04-24 às 16.02.36.png947×704 97.2 KB

Consigo aplicar a ‘gambiarra’ apenas para o produto1, porém queria usar a função ‘forEach’* para que funcione isoladamente para cada produto (botão) clicado.

Erro no retorno = i is not defined

Segue HTML:

 <div class="container paineis">
<section class="painel-novidades">

<ol>

…

<li class="produto" id="seis">
          <figure>
          <a href="produto.html">
            <img src="imgs/watch.jpg">
          
            <figcaption class="info-nome">Produto6</figcaption>
            <label class="preço">30.00</label><br>
            <button id="botao-compra" class="comprar" onclick="jogaNoCarrinho()">Adicionar ao Carrinho</button>
          </figure>
        </a>
      </li>
   </ol>
</section>

**Segue JS:**

    _function jogaNoCarrinho (){_
    _	event.preventDefault();_
    _	_
    _	montaOl();_
    _}_

**_//Cria o array e armazena cada produto no array_**
    _	var produtos = document.querySelectorAll(".produto");_
    _	var produto = produtos[i];_

**_//Pega cada elemento do array e aplica a função com 'onclick' para inserir no HMTL o produto selecionado_**
`    _	produto.forEach(function(jogaNoCarrinho){_`

    _	var nome = document.querySelector(".info-nome");_
    _	var nomeProd = nome.textContent;_
    _});_

**_//monta e insere no HTML_**
    _function montaOl(){_
    _	var ol = document.querySelector("#ol");_
    _	ol.appendChild(montaLi());_
    _}_

**_//monta Li para inserir no OL_**
`_function montaLi(){_`

    _	var li = document.createElement("li");_
    _	li.classList.add("selected");_
    _	li.textContent = nomeProd;_

    _return li;_
    _}_
#2

Creio que o problema esteja nesse trecho, tendo em vista que a variável “i” não foi declarada, pode remover essa segunda linha.

E no trecho seguinte, tente alterar o produto.forEach para produtos.forEach, pois você quer que, para cada elemento da lista de produtos, ele faça uma iteração.

_ produto.forEach(function(jogaNoCarrinho){_

_	var nome = document.querySelector(".info-nome");_
_	var nomeProd = nome.textContent;_
_});_

Posso não ter entendido muito bem, qualquer besteira me avise.

#3

Fala Guilherme, beleza? Obrigado pela atenção.

Removi a segunda linha e alterei para ‘produtos.forEach’ conforme sugerido, e cheguei mais perto do objetivo, segue print:

Captura de Tela 2017-04-24 às 17.27.33.png1149×548 84.5 KB

O único problema é que o código não aplica o ‘forEach’ (conforme imagem, cliquei no botão do Produto5 e no do Produto6 mas mesmo assim ele faz o append no HTML somente do Produto1).

Me parece que por não ter declarado um array a função forEach não está sendo usada… Alguém com mais experiencia teria alguma ideia?

#4

Só preciso de uma orientação sobre como criar um array e jogar todos os produtos do HTML para esse array, para depois aplicar o forEach

#5

para criar um array você pode selecionar todos os elementos de produtos do DOM e utilizar o método push para inclui-los no array, da uma olhada na documentação:

Array.prototype.push()

Método pushn o MDN Developer

Abraços :slight_smile:!