2

Como faço para limitar a quantidade (em 1) de DIV que é criada através do createElement para cada botão e fazer com que se o mesmo botão for clicado novamente some +1 no campo txt_result depois que a div for exibida.

function conteudo(btn){  
  //Cria a div  
  var div_c = document.createElement("DIV");  
  div_c.style.width = "30%";  
  div_c.style.height = "35px";  
  div_c.style.margin = "30px 10px";  
  div_c.style.background = "#ffe0e0";  
  div_c.innerHTML = "Item: <input name='txt_result'  type='text' value='' />";  
  document.getElementById("main").appendChild(div_c);  

  //Pega os conteúdos e exibe  
  var num = btn.previousElementSibling.value;  
  div_c.querySelector('[name="txt_result"]').value = num;  
}  
<input name="txt_1" id="txt_1" type="text" value="1" />  
<input name="btn1" id="btn1" type="button" value="Botao 1" onclick="conteudo(this)" />  

<input name="txt_2" id="txt_2" type="text" value="2" />  
<input name="btn2" id="btn2" type="button" value="Botao 2" onclick="conteudo(this)" />  

<input name="txt_3" id="txt_3" type="text" value="3" />  
<input name="btn3" id="btn3" type="button" value="Botao 3" onclick="conteudo(this)" />  

<div id="main"></div>

0

2 Respostas 2

1

Procure se o elemento já existe na página com getById, e somente se não existir, crie um novo elemento.

function conteudo(btn){
  var div_c = document.getElementById('item_div');

  //Cria a div
  if (!div_c) {
    div_c = document.createElement("DIV");
    div_c.id = "item_div";
    div_c.style.width = "30%";  
    div_c.style.height = "35px";  
    div_c.style.margin = "30px 10px";  
    div_c.style.background = "#ffe0e0";  
    div_c.innerHTML = "Item: <input name='txt_result'  type='text' value='0' />";  
    document.getElementById("main").appendChild(div_c);
  }

  //Pega os conteúdos e exibe  
  var num = btn.previousElementSibling.value;
  var input = div_c.querySelector('[name="txt_result"]');
  input.value = parseInt(input.value) + parseInt(num);
}
<input name="txt_1" id="txt_1" type="text" value="1" />  
<input name="btn1" id="btn1" type="button" value="Botao 1" onclick="conteudo(this)" />  

<input name="txt_2" id="txt_2" type="text" value="2" />  
<input name="btn2" id="btn2" type="button" value="Botao 2" onclick="conteudo(this)" />  

<input name="txt_3" id="txt_3" type="text" value="3" />  
<input name="btn3" id="btn3" type="button" value="Botao 3" onclick="conteudo(this)" />  

<div id="main"></div>

1
  • É quase isso... Nesse caso so mostra uma unica div e todos os botões somam junto a ela. Queria que cada botão mostrasse sua determinada div única, ou seja, cada botão com sua div individual. 12/03/2019 às 20:39
0

Depois de muita tentativa consegui o que queria. Nesse caso, trago os dados do e exibo em formas de e que esta dentro do DO WHILE do php abaixo. O código manipula os dados contidos dentro do inputs na qual foi selecionado.

<script>    
function mostrar(btn) {    
    const div = btn.closest('div');    

    var tx_id = div.querySelector('[name="tx_id"]').value;   
    var div_R = document.getElementById(tx_id);
    if(!div_R){
    var div_c = document.createElement("DIV");
    div_c.id = tx_id;
    div_c.style.width = "95%";
    div_c.style.height = "35px";
    div_c.style.margin = "30px 10px";
    div_c.style.background = "#ffe0e0";
    div_c.innerHTML = "ID: <input name='v4' id='v4' type='text' size='2' value='' />   Produto: <input name='v1' id='v1' type='text' value='' />   Quantidade: <input name='v2' id='v2' type='text' value='' size='2' /> Preço: <input name='v3' id='v3' type='text' value='' size='10' /> Sub-total: <input name='v5' id='v5' type='text' value='' size='10' />";
  document.getElementById("main").appendChild(div_c); 

   var t1 = div.querySelector('[name="tx1"]').value;
   var t2 = div.querySelector('[name="tx2"]').value;
   var t3 = div.querySelector('[name="tx3"]').value;
   var t4 = div.querySelector('[name="tx_sub_t"]').value;

   div_c.querySelector('[name="v1"]').value = t1;
   div_c.querySelector('[name="v2"]').value = t2;
   div_c.querySelector('[name="v3"]').value = t3;
   div_c.querySelector('[name="v4"]').value = tx_id;
   div_c.querySelector('[name="v5"]').value = t4; 
    }else{

    //Atualiza o dado do INPUT quantidade dos botões
    var num_1 = div.querySelector('[name="tx2"]').value;
    var soma1 = parseInt(num_1) + 1;
    div.querySelector('[name="tx2"]').value = soma1;

    //Atualiza o dado do INPUT subtotal dos botões
    var tx_val_1 = div.querySelector('[name="tx3"]').value;
    var tx_val_2 = div.querySelector('[name="tx_sub_t"]').value;
    var soma2 = (parseInt(tx_val_1) + parseInt(tx_val_2)).toFixed(2);
    div.querySelector('[name="tx_sub_t"]').value = soma2;

    //Atualiza o dado dos INPUTS da DIV criada pela função
    div_R.querySelector('[name="v2"]').value = soma1;
    div_R.querySelector('[name="v5"]').value = soma2; 
    }   
}
</script>

<?php do { ?>  
  <div>  
    <input name="tx_id" type="text" value="<?php echo $row_Recordset1['id']; ?>" size="2" style="background:#F96" />  
    <input name="tx1" type="text" value="<?php echo $row_Recordset1['nome']; ?>" />  
    <input name="tx2" type="text" value="1" />  
    <input name="tx3" type="text" value="<?php echo $row_Recordset1['preco']; ?>" />  
    <input name="tx_sub_t" type="text" value="<?php echo $row_Recordset1['preco']; ?>" />  
    <button name="btn" id="btn" type="button" onclick="mostrar(this)"><?php echo $row_Recordset1['nome']; ?></button>  
  </div>  
  <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>  


 <div id="main"></div>    

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 .