-1

Estou iniciando os estudos com JavaScript puro, para praticar melhor criei uma tabela como se fossem pedidos de uma pizzaria, e coloquei alguns campo (sabor, quantidade e valor). No final da linha tenho um botão de "+". A ideia é que quando eu clique nele, acrescente ao campo quantidade. Para isso, imaginei que seria iniciado desta forma ao menos para pegar este campo, mas quando tento imprimir ele apresenta msg de undefined:

//CAPTURA O BOTÃO +
var botaoSoma = document.querySelector(".btnSoma");

// CAPTURA A QUANTIDADE DA PIZZA
var calabresaQtd = document.querySelector("#quantidade_calabresa");


//ACRESCENTA UM EVENTO AO CLICAR NO BOTÃO + E IMPRIME A QUANTIDADE DE PIZZA
botaoSoma.addEventListener('click', function(){
    alert(calabresaQtd.value);    
});
4
  • Seja bem vindo Igor, eu editei sua pergunta porque costumamos deixar os textos o mais direto possível, não se esqueça de fazer o tour para entender melhor ainda como tudo funciona por aqui. Agora sobre sua pergunta, seria possível adicionar o HTML da página? para isso basta usar o botão editar logo abaixo da pergunta.
    – Barbetta
    28/08/2018 às 2:44
  • Coloque o HTML dos campos na pergunta.
    – Sam
    28/08/2018 às 3:07
  • Opa, valeu Barbetta, estou começando agora a utilizar a ferramenta, mas vou me adaptando, valeu pelas dicas. 28/08/2018 às 23:30
  • <table class="table"> <thead> <tr> <th>Sabor</th> <th>Quantidade</th> <th>Valor</th> </tr> </thead> <tbody> <tr> <td>Cababresa</td> <td id="quantidade_calabresa">0</td> <td id="calabresa">8</td> <td> <button class="btn btn-success btnSoma">+</button> <button class="btn btn-default">-</button> </td> </tr> </tbody> </table> 28/08/2018 às 23:34

2 Respostas 2

0

Não sei como está seu código html, mas você pode utilizar o getElementById, que pega um determinado Id de escolha ou querySelector, que vai pegar o seletor:

function MyFunction(){
   //Pegar pelo Id
   var id = document.getElementById("inputId").value;
   //Pegar pelo Selector
   var qtd = document.querySelector("#qtd").value;
   alert(id);
   alert(qtd);
}
<!DOCTYPE html>
<html>
<head>
  <title>teste</title>
</head>
<body>
   <form>
      <label>Digite:</label>
      <input type="text" id="inputId">
      <label>Digite:</label>
      <input type="text" id="qtd">
      <input type="submit" value="Enviar" onclick="MyFunction()">
   </form>
</body>
</html>

-5

Use Id invés de class para capturar o valor do input

var calabresaQtd = document.getElementById("quantidade_calabresa");

exemplo: https://js-dwsfbn.stackblitz.io

4
  • 1
    Bem vindo Paulo! Tente sempre explicar ao máximo sua resposta. Por exemplo: Por que usar ID ao invés de class? ... exemplos em HTML, CSS e JS você consegue postar direto na resposta! Procure mais como formatar a resposta, pois tem diversas ferramentas! ✌️
    – rbz
    28/08/2018 às 10:02
  • 2
    Não entendi colega... Só disse para dar uma melhorada na resposta. Quem está com problemas as vezes não sabe de detalhes simples que fazem toda diferença. Eu só comentei, não foi eu que dei -1 ! Mas não desanime, eu já tomei muito -1 a toa. Eu tenta ajudar sem esperar nada em troca, simplesmente porque já me ajudaram bastante e só quero fazer minha parte! ✌
    – rbz
    3/09/2018 às 0:20
  • 4
    Caro Paulo, se não consegue suportar criticas construtivas, imagine ter que atuar em um escritório com diversos setores, pessoas, personalidades, autoridades no assunto que vão lhe apontar falhas. Realmente parece que questão de "suportar" é uma questão pessoal e relativa de cada um. Recomendo rever suas ideias e entender melhor as criticas construtivas.
    – Syzoth
    3/09/2018 às 17:40
  • Quando alguém sinalizar um ponto de melhoria tente ler e entender o por quê ou ao menos contra argumente, caso contrário, suas respostas serão consideras ruins independente da linguagem em que você escrever. 3/09/2018 às 17:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .