Javascript - Display quantity [closed]

Navigation
1

My code is as follows: 

function adicionar(){
  
   var tabela = document.getElementById('tabela');
   var tp = document.getElementById("pedido");
   tp = tp.options[tp.selectedIndex].textContent;
   var qtd = document.getElementById("qtd").value;
   
   var ped_id = document.body.querySelectorAll(".rowtabela").length;
   
   var novo_item = '<div class="rowtabela" id="'+ped_id+'">'
   +'<div class="item">'+qtd+'</div>'
   +'<div class="item">'+tp+'</div>'
   +'<div class="botao">'
   +'<button onclick="remover(this)">X</button>'
   +'</div></div>';
   
   tabela.innerHTML += novo_item;
   
}

function remover(e){
   e.parentNode.parentNode.outerHTML = '';
}


  function enivar() {
var end = document.getElementById('endereco').value
var nome = document.getElementById('nome').value
var fone = document.getElementById('fone').value
var tabela = document.getElementsByClassName('rowtabela')

var qtd = tabela[1].childNodes[1]


alert("Nome: " + nome + "\nFone: " + fone + "\nEndereço: " + end + "\n\nPedidos: " + qtd);
}
<div class="container">
  <h1>Faça seu pedido</h1>
  <form action="">
    <div class="content">
      <label for="">Nome: </label>
      <input id="nome" type="text">
    </div>
    <div class="content">
      <label for="">Fone: </label>
      <input id="fone" type="number">
    </div>
    <div class="content">
      <label for="">Endereço: </label>
      <textarea id='endereco' name="textarea" cols="40" rows="5"></textarea>
    </div>

    <div class="sanduiche">
      <label for="">Pedido</label>
      <select name="" id="pedido">
        <option value="n001">Pedido Doidao 001</option>
        <option value="n002">Pedido Doidao 002</option>
        <option value="n003">Pedido Doidao 003</option>
        <option value="n004">Pedido Doidao 004</option>
      </select>
      <label for="">Pão</label>
      <select name="" id="pao">
        <option value="pao1">Pão 1</option>
        <option value="pao2">Pão 2</option>
        <option value="pao3">Pão 3</option>
        <option value="pao4">Pão 4</option>
      </select>
      <label for="">Quantidade</label>
      <input id="qtd" type="number">
      <button onclick="adicionar()">Adicionar</button>
    </div>
  </form>
  <div class="adicionados" id="tabela">
    <div class="rowtabela">
      <div class="item">
        <b>Quantidade</b>
      </div>
      <div class="item">
        <b>Sanduíche</b>
      </div>
      <div class="item">

      </div>
    </div>
    <div class="rowtabela">
      <div class="item" metaval='20'>
        20
      </div>
      <div class="item">
        Sanduíche Brabissimo
      </div>
      <div class="botao">
        <button id="botao" onclick="remover(this);">X</button>
      </div>
    </div>
    <div class="rowtabela">
      <div class="item" value='20'>
        20
      </div>
      <div class="item">
        Sanduíche Brabissimo
      </div>
      <div class="botao">
        <button id="botao" onclick="remover(this);">X</button>
      </div>
    </div>
    <div class="rowtabela">
      <div value='20' class="item">
        20
      </div>
      <div class="item">
        Sanduíche Brabissimo
      </div>
      <div class="botao">
        <button id="botao" onclick="remover(this);">X</button>
      </div>
    </div>
  </div>
  <button onclick="enivar()" class="enviar">Enviar</button>
</div>

I would like to display the quantity using Javascript in alert

    
asked by anonymous 26.04.2018 / 20:43

1 answer

1
  

In your code when you click the Adicionar button the form is being sent!

To understand why, see the types of buttons below and their behavior.

  • The HTML element <button> represents a clickable button.
    • submit : As the name itself says, it submits the data to the URL specified in the FORM action. This is the default if the attribute is not specified , or if the attribute is dynamically changed to an empty or invalid value.
    • reset : restores all input elements of the form to their initial values.
    • button : The button has no default behavior. It may have client-side scripts associated with element events, which are triggered when the event occurs.

1st correction in code: type="button" on button Adicionar 

<button type="button" onclick="adicionar()">Adicionar</button>

2nd correction - To know the amount of elements with class rowtabela . 

var tabela = document.getElementsByClassName('rowtabela')
var qtd = tabela.length;
  

note that there is a div with class rowtabela 

<div class="rowtabela">
  <div class="item">
    <b>Quantidade</b>
  </div>
  <div class="item">
    <b>Sanduíche</b>
  </div>
  <div class="item">

  </div>
</div>
  

which will also be part of the count. If it is not to be counted, a unit of var qtd must be decreased, that is, var qtd = tabela.length - 1;

See working example 

function adicionar(){
  
   var tabela = document.getElementById('tabela');
   var tp = document.getElementById("pedido");
   tp = tp.options[tp.selectedIndex].textContent;
   var qtd = document.getElementById("qtd").value;
   
   var ped_id = document.body.querySelectorAll(".rowtabela").length;
   
   var novo_item = '<div class="rowtabela" id="'+ped_id+'">'
   +'<div class="item">'+qtd+'</div>'
   +'<div class="item">'+tp+'</div>'
   +'<div class="botao">'
   +'<button onclick="remover(this)">X</button>'
   +'</div></div>';
   
   tabela.innerHTML += novo_item;
   
}

function remover(e){
   e.parentNode.parentNode.outerHTML = '';
}


function enivar() {
var end = document.getElementById('endereco').value
var nome = document.getElementById('nome').value
var fone = document.getElementById('fone').value
var tabela = document.getElementsByClassName('rowtabela')

//var qtd = tabela[1].childNodes[1]
var qtd = tabela.length;

alert("Nome: " + nome + "\nFone: " + fone + "\nEndereço: " + end + "\n\nPedidos: " + qtd);
}
   <div class="container">
  <h1>Faça seu pedido</h1>
  <form action="">
<div class="content">
  <label for="">Nome: </label>
  <input id="nome" type="text">
</div>
<div class="content">
  <label for="">Fone: </label>
  <input id="fone" type="number">
</div>
<div class="content">
  <label for="">Endereço: </label>
  <textarea id='endereco' name="textarea" cols="40" rows="5"></textarea>
</div>

<div class="sanduiche">
  <label for="">Pedido</label>
  <select name="" id="pedido">
    <option value="n001">Pedido Doidao 001</option>
    <option value="n002">Pedido Doidao 002</option>
    <option value="n003">Pedido Doidao 003</option>
    <option value="n004">Pedido Doidao 004</option>
  </select>
  <label for="">Pão</label>
  <select name="" id="pao">
    <option value="pao1">Pão 1</option>
    <option value="pao2">Pão 2</option>
    <option value="pao3">Pão 3</option>
    <option value="pao4">Pão 4</option>
  </select>
  <label for="">Quantidade</label>
  <input id="qtd" type="number">
  <button type="button" onclick="adicionar()">Adicionar</button>
</div>
  </form>
  <div class="adicionados" id="tabela">
<div class="rowtabela">
  <div class="item">
    <b>Quantidade</b>
  </div>
  <div class="item">
    <b>Sanduíche</b>
  </div>
  <div class="item">

  </div>
</div>
<div class="rowtabela">
  <div class="item" metaval='20'>
    20
  </div>
  <div class="item">
    Sanduíche Brabissimo
  </div>
  <div class="botao">
    <button id="botao" onclick="remover(this);">X</button>
  </div>
</div>
<div class="rowtabela">
  <div class="item" value='20'>
    20
  </div>
  <div class="item">
    Sanduíche Brabissimo
  </div>
  <div class="botao">
    <button id="botao" onclick="remover(this);">X</button>
  </div>
</div>
<div class="rowtabela">
  <div value='20' class="item">
    20
  </div>
  <div class="item">
    Sanduíche Brabissimo
  </div>
  <div class="botao">
    <button id="botao" onclick="remover(this);">X</button>
  </div>
</div>
  </div>
  <button onclick="enivar()" class="enviar">Enviar</button>
</div>
    
27.04.2018 / 03:33
Include new table in several Mysql database at one time Error Undefined property