How to transfer data from one function to another?

Asked

Viewed 122 times

0

The initial idea of my personal project was to develop a basic system to carry out the payment division 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 customers and one for products (with prices), creating a list for the first and another list for the second. It is possible to 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 obtain the amount that must be paid by each one through the variable "valueDivided", but I cannot enter this value in the list of customers, since it is not possible to access the "areaDoValorDivided"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 "addProductFunction()" function that changes some content present only in the "addClienteFunction()".

javascript html function variables

  • See if this is it: vc adds a product, the total sum of products is divided among customers. When adding a new customer, the value is again divided among customers. From what I noticed, the value is only divided when a new product is added, not when a new customer is added.

  • That’s right, the value is changed only through the function that adds a new product, since there is the addition of a new amount to the total amount. But my doubt is about how it would be possible to add in the function of products a mechanism to change the information present in the list of customers, to be able to add the value resulting from the division of this new amount.

  • It would be better to create a separate function that does the division of values. So vc can call it in the two other functions.

1 answer

0

I suggest creating a third function where the division of values is made. This will make your code much more flexible, so you can call it when you want in other functions.

See that below I created the function dividirValor() and commented on some lines that have become 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>

Browser other questions tagged javascript html function variables

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