[Dúvida] Mostrando a lista

Olá, Pedro! Tudo bem?

Pelo que vejo, você está tentando adicionar itens a uma lista de produtos e exibir essa lista. No entanto, parece que há uma confusão entre a variável listaDeProdutos e o elemento HTML que você está tentando manipular. A variável listaDeProdutos é um array vazio e você está tentando usar o método innerHTML nele, o que não é possível, pois innerHTML é um método para elementos HTML, não para arrays.

Além disso, você está tentando usar o método textContent para adicionar itens à lista de produtos, o que substituirá o conteúdo existente em vez de adicionar a ele.

A sugestão do GPT é boa, mas precisa ser aplicada corretamente. Aqui está uma versão corrigida do seu código:

var listaDeProdutos = [];

function adicionar(){
    var produto = document.getElementById('produto').value;
    var mostraValor = document.getElementById('valor-total');
    var nomeProduto = produto.split('-')[0];
    var valorUnitario = parseFloat(produto.split('R$')[1]);
    var qtd = document.getElementById('quantidade');
   
    valorTotal = valorTotal + calcularValorDaCompra(qtd.value,valorUnitario);
    mostraValor.textContent = `R$${valorTotal}`;  

    var mostraProdutos = document.getElementById('lista-produtos');
   
    listaDeProdutos.push(`<p class="texto-azul">${qtd.value}x</p> ${nomeProduto} <p class="texto-azul">R$${valorUnitario}</p>`);

    mostraProdutos.innerHTML = listaDeProdutos.join('');
}

Note que, agora, estamos usando o método push para adicionar um novo produto à lista de produtos e, em seguida, usamos o método join('') para converter o array em uma string e adicionar essa string ao elemento HTML. Se achar que faz sentido, adicione ao seu código.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.

Fez total sentido para mim, mas ainda fiquei levemente confuso com essa parte aqui: " mostraProdutos.innerHTML = listaDeProdutos.join('');" Poderia explicar ela melhor para mim?

Olá, Pedro.

Esse código:

mostraProdutos.innerHTML = listaDeProdutos.join('');

Esta linha tem duas partes principais: listaDeProdutos.join('') e mostraProdutos.innerHTML.

listaDeProdutos.join(''):

O método join('') é usado em arrays para concatenar todos os elementos do array em uma única string. No seu caso, listaDeProdutos é um array que contém strings representando os produtos. O método join('') vai unir essas strings em uma única string. O argumento ' ' dentro do join representa o separador entre os elementos. Neste caso, usamos uma string vazia (''), o que significa que não haverá nenhum espaço ou caractere entre os elementos unidos.

mostraProdutos.innerHTML:

mostraProdutos é um elemento HTML, presumivelmente um contêiner onde você deseja exibir a lista de produtos. innerHTML é uma propriedade que representa o conteúdo HTML interno desse elemento. Ao atribuir listaDeProdutos.join('') a mostraProdutos.innerHTML, você está efetivamente inserindo a string resultante da união dos produtos como o conteúdo HTML do elemento mostraProdutos. Isso atualiza dinamicamente o conteúdo do elemento HTML para refletir a lista de produtos.

Em resumo, essa linha de código está convertendo o array de produtos em uma única string e, em seguida, atribuindo essa string como o conteúdo HTML do elemento onde você deseja exibir a lista. Isso é útil quando você quer mostrar uma lista dinâmica e atualizar a exibição conforme novos itens são adicionados.