Take the value of a field

Asked

Viewed 744 times

-1

I am starting the studies with pure Javascript, to practice better I created a table as if they were orders of a pizzeria, and put some field (flavor, quantity and value). At the end of the line I have a button "+". The idea is that when I click on it, add quantity to the field. For this, I imagined that it would be started this way at least to catch this field, but when I try to print it presents msg of 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);    
});
javascript value

  • Welcome Igor, I edited your question because we usually leave the texts as direct as possible, do not forget to do the [tour] to better understand how everything works here. Now about your question, would it be possible to add the HTML of the page? for this just use the [Edit] button just below the question.

  • Put the HTML of the fields in question.

  • Oops, thanks Barbetta, I’m starting to use the tool now, but I’ll adapt, thanks for the tips.

  • <table class="table"> <thead> <tr> <th>Flavour</th> <th>Quantity</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Cababresa</td> <td id="quantity_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>

2 answers

0

I don’t know what your code is html, but you can use the getElementById, which takes a particular Id of choice or querySelector, that will catch the selector:

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 instead of class to capture input value

var calabresaQtd = Document.getElementById("quantity_calabresa");

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

  • 1

    Welcome Paul! Always try to explain your answer to the fullest. For example: Why use ID instead of class? ... examples in HTML, CSS and JS you can post right in the answer! Look for more how to format the answer as it has several tools!

  • 2

    I didn’t understand, mate... I just said to give an improved answer. Who is in trouble sometimes does not know simple details that make all the difference. I just commented, it was not I who gave -1 ! But don’t be discouraged, I’ve taken too much -1 for nothing. I try to help without expecting anything in return, simply because they have already helped me enough and I just want to do my part! ✌

  • 4

    Dear Paulo, if you can’t endure constructive criticism, imagine having to work in an office with several sectors, people, personalities, authorities in the subject that will point out flaws. It really seems that the question of "endure" is a personal and relative question of each one. I recommend to review your ideas and better understand constructive criticism.

  • When someone signals a point of improvement try to read and understand why or at least against argument, otherwise your answers will be considered bad regardless of the language in which you write.

Browser other questions tagged javascript value

You are not signed in. Login or sign up in order to post.