Javascript - View quantity

Asked

Viewed 70 times

1

My code is this:

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 on alert

javascript

  • What is the difficulty? What should the function do adicionar, that has not been defined?

  • Update the code with the add function

  • I just updated, I would like to fetch the entered elements inside the table div and display them in Alert

1 answer

1

In your code by clicking the button Adicionarthe form is being sent!

To understand why, see the (type) types of Buttons below and their behavior.

  • The HTML Element <button> represents a clickable button.
    • submit: as the name itself says, commit 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 form entries to their initial values.
    • button: The button has no default behavior. It may have client-side scripts associated with element events, in which they are triggered when the event occurs.

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

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

second correction - To know the quantity of elements with the 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 should not be counted, one unit of the var qtd, that is, var qtd = tabela.length - 1;

See example working 

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>

Browser other questions tagged javascript

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