How to transfer data from one function to another?

Question

How to transfer data from one function to another?

Navigation

#1 by (0 votes)

0

The initial idea of my personal project was to develop a basic system for dividing payment between n customers who consumed n products, in order to train my skills.

For this, the central idea would be to feed two simple blocks of input, one for the customers and another for the products (with the prices), creating a list for the first and another list for the second. You can see in the codes that most of the system has already been done with the two main functions:

HTML

var addCliente = document.getElementById("addCliente");
var addProduto = document.getElementById("addProduto");
var listaClientesContainer = document.getElementById("listaClientesContainer");
var listaProdutosContainer = document.getElementById("listaProdutosContainer");

addCliente.addEventListener("click", function() {
    addClienteFunction();
});
        
addProduto.addEventListener("click", function() {
    addProdutoFunction();
});
    
var contadorCliente = 0;

function addClienteFunction() {
    var nomeCliente = document.getElementById("nomeCliente");
            
    if (nomeCliente.value != "") {
        var postagemCliente = document.createElement("div");
        var dadosDoCliente = document.createElement("div");
        var areaDoValorDividido = document.createElement("div");
                
                
        listaClientesContainer.appendChild(postagemCliente);
                
        postagemCliente.classList.add("postagemCliente");
        postagemCliente.appendChild(dadosDoCliente);
                
        dadosDoCliente.classList.add("dadosDoCliente");
                
        postagemCliente.appendChild(areaDoValorDividido);   
      areaDoValorDividido.classList.add("areaDoValorDividido");
                
        dadosDoCliente.innerHTML += contadorCliente+1 + " - " + nomeCliente.value;
        areaDoValorDividido.innerHTML = "R$0";
        nomeCliente.value = "";
                
        contadorCliente++;
    }
}
          
var valorTotal = 0;
var contadorProduto = 0;
var valorDividido = 0;

function addProdutoFunction() {
    var nomeProduto = document.getElementById("nomeProduto");
    var precoProduto = document.getElementById("precoProduto");
            
    if ((nomeProduto.value != "") && (precoProduto.value != "") && (!isNaN(precoProduto.value))) {
        var postagemProduto = document.createElement("div");
                
                
        listaProdutosContainer.appendChild(postagemProduto);
                
        postagemProduto.classList.add("postagemProduto");
        postagemProduto.innerHTML += contadorProduto+1 + " - " + nomeProduto.value + " (R$" + precoProduto.value + ")";
                
        valorTotal += Number(precoProduto.value);
        valorDividido = valorTotal/contadorCliente;
        console.log(valorDividido);
                
        nomeProduto.value = "";
        precoProduto.value = "";
        contadorProduto++;
    }
}

<div id="areaClientes">
    <div id="clientesContainer">
         <input type="text" id="nomeCliente" placeholder="Adicionar novo cliente">
         <button id="addCliente">Adicionar</button>
         <button id="finalizarConta">Fechar Conta</button>
    </div>
</div>
    
<div id="areaProdutos">
     <div id="produtosContainer">
         <input type="text" id="nomeProduto" placeholder="Adicionar novo produto">
         <input type="text" id="precoProduto" placeholder="Adicionar preço do produto">
         <button id="addProduto">Adicionar</button>
     </div>
</div>
    
<div id="listaClientes">
    <div id="listaClientesContainer"></div>
</div>
    
<div id="listaProdutos">
    <div id="listaProdutosContainer"></div>
</div>

The question in this case is "simple": I can get the value that should be paid for each one via the "Divided value" variable, but I can not enter this value in the clients list, since it is not possible to access the "DividedType", because this is a variable present only in the other function.

So, I was wondering if there is any way to insert a command in the function "addProdutoFunction ()" that changes some content present only in the function "addClientFunction ()".

javascript html

asked by anonymous 13.11.2018 / 10:20

1 answer

Unauthorized Text to Speech Watson IBM APK install but does not run - IONIC

score 0 · Answer 1

I suggest creating a third function where the values are divided. This will make your code much more flexible, so you can call it whenever you want in the other functions.

See below that I created the function dividirValor() and commented on some lines that became unnecessary:

var addCliente = document.getElementById("addCliente");
var addProduto = document.getElementById("addProduto");
var listaClientesContainer = document.getElementById("listaClientesContainer");
var listaProdutosContainer = document.getElementById("listaProdutosContainer");

    addCliente.addEventListener("click", function() {
        addClienteFunction();
    });

    addProduto.addEventListener("click", function() {
        addProdutoFunction();
    });

    var contadorCliente = 0;
    function addClienteFunction() {
        var nomeCliente = document.getElementById("nomeCliente");

        if (nomeCliente.value != "") {
            var postagemCliente = document.createElement("div");
            var dadosDoCliente = document.createElement("div");
            var areaDoValorDividido = document.createElement("div");

            listaClientesContainer.appendChild(postagemCliente);
            postagemCliente.classList.add("postagemCliente");
            postagemCliente.appendChild(dadosDoCliente);
            dadosDoCliente.classList.add("dadosDoCliente");
            postagemCliente.appendChild(areaDoValorDividido);
            areaDoValorDividido.classList.add("areaDoValorDividido");

            dadosDoCliente.innerHTML += contadorCliente+1 + " - " + nomeCliente.value;
            areaDoValorDividido.innerHTML = "R$0";
            nomeCliente.value = "";

            contadorCliente++;
            
            dividirValor(); // chama a função para dividir os valores
            
        }
    }

    var valorTotal; // define o valor total
    var contadorProduto = 0;
    var valorDividido = 0;
    function addProdutoFunction() {
        var nomeProduto = document.getElementById("nomeProduto");
        var precoProduto = document.getElementById("precoProduto");

        if ((nomeProduto.value != "") && (precoProduto.value != "") && (!isNaN(precoProduto.value))) {
            var postagemProduto = document.createElement("div");

            listaProdutosContainer.appendChild(postagemProduto);
            postagemProduto.classList.add("postagemProduto");
            postagemProduto.innerHTML += contadorProduto+1 + " - " + nomeProduto.value + " (R$" + precoProduto.value + ")";

//            valorTotal += Number(precoProduto.value);
//            valorDividido = valorTotal/contadorCliente;
            console.log(valorDividido);
            
            dividirValor(); // chama a função para dividir os valores
            

            nomeProduto.value = "";
            precoProduto.value = "";
            contadorProduto++;
            }
    }
    
    function dividirValor(){

      valorTotal = 0; // reseta o valor total para 0
      var produtosValores = document.getElementsByClassName("postagemProduto"); // pega os produtos
      for(var x=0; x<produtosValores.length; x++){
         valorTotal += parseFloat(produtosValores[x].innerHTML.match(/R\$(\d+)/)[1]); // soma os valores
      }
      
      var areasValorDividido = document.getElementsByClassName("areaDoValorDividido"); // pega os clientes

      var numero_clientes = areasValorDividido.length; // conta os clientes
      if(numero_clientes){
         valorDividido = valorTotal/numero_clientes; // divide o total pelo número de clientes
         for(var x=0; x<areasValorDividido.length; x++){
            areasValorDividido[x].innerHTML = "R$"+valorDividido;
         }
      }
    }

<div id="areaClientes">
    <div id="clientesContainer">
        <input type="text" id="nomeCliente" placeholder="Adicionar novo cliente">
        <button id="addCliente">Adicionar</button>
        <button id="finalizarConta">Fechar Conta</button>
    </div>
</div>

<div id="areaProdutos">
    <div id="produtosContainer">
        <input type="text" id="nomeProduto" placeholder="Adicionar novo produto">
        <input type="text" id="precoProduto" placeholder="Adicionar preço do produto">
        <button id="addProduto">Adicionar</button>
    </div>
</div>

<div id="listaClientes">
    <div id="listaClientesContainer">
    </div>
</div>

<div id="listaProdutos">
    <div id="listaProdutosContainer">
    </div>
</div>