Carrinho de Compras JavaScript

Vinicius Filipe · Março 7, 2013

Bom gente, eu sou novo em JavaScript e preciso fazer um carrinho de compras muito simples em JS e com Cookie. Eu preciso criar três produtos com um botão de adicionar, e uma div do lado direito com os produtos e as quantidades. Cada vez que clicar para adicionar somar um nas quantidades na outra div. Não estou conseguindo somar nos itens da outra div. Se puderem me ajudar.

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
#prod{background-color:#000000; color:#FFFFFF; width:400px;position:absolute;}
#carr{position:absolute; left:600px; top:0px;}
</style>
&lt;script type="text/javascript">
function add(){
var v =document.getElementById("num");
v.value=parseInt(v.value)+1;}
    
</script>
</head>
<body>
    <div id="prod">
        <p>Calça: <br><input type="button" name="cal" onclick="add()" value="Adicionar ao Carrinho."></p>
        <p>Bermuda: <br><input type="button" name="ber" value="Adicionar ao Carrinho."></p>
        <p>Camisa: <br><input type="button" name="cam" value="Adicionar ao Carrinho."></p>
        </div>
    <div id="carr">
        <p>Calça<br> Iten(s):<p id="num">0</p></p>
        <p>Bermuda<br> Iten(s):</p>
        <p>Camisa<br> Iten(s):</p>
        </div>
</body>
</html>

Júlio Pradera · Março 7, 2013

Tente trocar a sua função add() por essa aqui:

function add() {
  var v = document.getElementById("num");
  v.innerHTML = parseInt(v.innerHTML) + 1;
}

Explicando: Você está tratando a sua tag <p> como se fosse um campo <input>.

A tag <p> não possui um value.

Para esse caso, você deve usar o innerHTML para pegar e escrever um valor dentro da tag.

Espero ter ajudado.

Editado Março 7, 2013 por Júlio Pradera

Vinicius Filipe · Março 7, 2013

Esse foi um exemplo que eu achei na internet. Entendi o que você disse. Mas como eu vou ir somando na <p> a cada vez que o usuário clicar no input?

Júlio Pradera · Março 7, 2013

Esse foi um exemplo que eu achei na internet. Entendi o que você disse. Mas como eu vou ir somando na <p> a cada vez que o usuário clicar no input?

Tem que substituir o value por innerHTML.

É só substituir a sua função add() pela que eu coloquei.

Ela já está funcionando no código que você postou.

Vinicius Filipe · Março 7, 2013

Agora eu preciso arrumar um meio de usar o Cookie. Eu preciso que atualize o cookie assim que adicionado no carrinho. E assim que o usuário fechar e abrir novamente a página, ela esteja do mesmo jeito que ele deixou. Se puder me ajudar de novo eu agradeço.

Editado Março 8, 2013 por Vinicius Filipe

Entrar

Carrinho de Compras JavaScript

Pergunta

Vinicius Filipe

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Júlio Pradera

Link para o comentário

Compartilhar em outros sites

Vinicius Filipe

Link para o comentário

Compartilhar em outros sites

Júlio Pradera

Link para o comentário

Compartilhar em outros sites

Vinicius Filipe

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades