1

Meu código é o seguinte:

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>

Gostaria de exibir a quantidade utilizando Javascript no alert

3
  • Qual a dificuldade? O que deveria fazer a função adicionar, que não foi definida?
    – Woss
    26/04/2018 às 18:47
  • Atualize o codigo com a função adicionar 26/04/2018 às 18:57
  • Acabei de atualizar, eu gostaria de buscar os elementos inseridos dentro da div tabela e exibi-los no alert 26/04/2018 às 22:42

1 Resposta 1

1

No seu código ao clicar no botão Adicionaro formulário está sendo enviado!

Para entender o porque, veja os tipos (type) de buttons abaixo e seu comportamento.

  • O Elemento HTML <button> representa um botão clicável.
    • submit: como o proprio nome diz, submete os dados à URL especificada no action do FORM. Esse é o padrão se o atributo não for especifidado, ou se o atributo é dinamicamente mudado para um valor vazio ou inválido.
    • reset: restaura todos os elementos de entrada do formulário aos seus valores iniciais.
    • button: O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer.

1ª correção no código: type="button" no botão Adicionar

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

2ª correção - Para saber a quantidade de elementos com a classe rowtabela.

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

observe que há uma div com classe rowtabela

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

  </div>
</div>

que também fará parte da contagem. Caso não deva ser contada, há que se diminuir uma unidade da var qtd, ou seja, var qtd = tabela.length - 1;

Veja exemplo funcionando

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>

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