Add number in array and list it

Asked

Viewed 219 times

1

What’s the simplest way to do it with array a kind of bank where I deposit a value in a array and show the same after. My difficulty is in modifying the array, where the initial value would be 0 and then as you deposit the value increases based on my logic there very simple.

var dinheiro = [];
	var totalSaque;
	
	function depositar() {
		

	
		var deposito = document.getElementById("txt").value;

	    totalSaque = dinheiro + deposito;
      
      document.getElementById("dep").innerHTML = "--valor depositado--";


		
	}



	function verConta() {
		
		document.getElementById("ex").innerHTML = totalSaque;
    document.getElementById("dep").innerHTML = "";
		
	}
<!DOCTYPE html>
<html>
<head>
	<title>banco</title>
</head>
<body>

<h1 style="float: left;">No Caixa:</h1><h1 id="ex" style="float: left;">0</h1>

</br></br></br></br></br>

<input id="txt" type="number">

<button onclick="depositar()">Depositar</button>
<button onclick="verConta()">ver Conta</button>


<p id="dep"></p>


</body>
</html>

javascript html array
  • 1

    Do you have to store in an array? If you don’t need to, just add the amount deposited with the amount in the account.

  • But when I press the button "see account" after having deposited for example 20 and 10 for example. appears the 10 and not 30 understood? I have some very wrong logic, but I don’t know what it is

  • I will post the example without the array, if you still want with the array then put with another answer.

  • If you can post both versions, I’d really appreciate it.

3 answers

2

The problem with the code is that it’s not adding up where it should, sum up into a variable that even has a value. For some reason I believe you’re thinking that the array is a guy who keeps on keeping the sum, which is far from being true. It’s simpler than this:

var total = 0;
function depositar() {
    total += parseInt(document.getElementById("txt").value);
    document.getElementById("dep").innerHTML = "--valor depositado--";
}
function verConta() {
    document.getElementById("ex").innerHTML = total;
    document.getElementById("dep").innerHTML = "";
}
<!DOCTYPE html>
    <head>
        <title>banco</title>
    </head>
    <body>
        <h1 style="float: left;">No Caixa:</h1><h1 id="ex" style="float: left;">0</h1>
        </br></br></br></br></br>
        <input id="txt" type="number">
        <button onclick="depositar()">Depositar</button>
        <button onclick="verConta()">ver Conta</button>
        <p id="dep"></p>
    </body>
</html>

I put in the Github for future reference.

If you want to show it all:

var dinheiro = [];
var total = 0;
function depositar() {
    var valor = parseInt(document.getElementById("txt").value)
    total += valor;
    dinheiro.push(valor); //somente se for fazer algo com este valor depois
    document.getElementById("dep").innerHTML += valor + "<br>";
}
function verConta() {
    document.getElementById("ex").innerHTML = total;
    document.getElementById("dep").innerHTML = "";
}
<!DOCTYPE html>
    <head>
        <title>banco</title>
    </head>
    <body>
        <h1 style="float: left;">No Caixa:</h1><h1 id="ex" style="float: left;">0</h1>
        </br></br></br></br></br>
        <input id="txt" type="number">
        <button onclick="depositar()">Depositar</button>
        <button onclick="verConta()">ver Conta</button>
        <p id="dep"></p>
    </body>
</html>

I put in the Github for future reference.

2

To work with arrays you can start the variable as follows: totalSaque = new Array(); or totalSaque = [];

To store the values is also very simple, you use the method push or inform the index you want to change, create, modify or remove. Ex:

totalSaque.push("Novo-valor");

/* Ou */

totalSaque[1] = "Novo-valor";

List it also is not headache, you can do using the repeating structure for or their similar, as an example: for. in or for. of

With example it is easier. Follow below:

  const depositos = new Array();
	
	function depositar() {
    let deposito = document.getElementById("txt").value;
    
    // Adiciona um novo valor no array
    depositos.push(deposito)
    
    document.getElementById("dep").innerHTML = "--valor depositado--";
  }
  
  function verConta() {
    let html = "";
    let total = 0;
    
    // Percorre todos os valores salvos no array
    for (let deposito of depositos) {
    
      // Captura o valor
      html += "Deposito R$" + deposito + "<br>";
      
      // Soma total com ele mesmo + o valor do deposito
      total += parseInt(deposito);
    }
    
    html += "<hr>R$" + total;
  
		document.getElementById("ex").innerHTML = total;
    document.getElementById("dep").innerHTML = html;
	}
<h1 style="float: left;">No Caixa:</h1>
<h1 id="ex" style="float: left;">0</h1>

<br/><br/><br/><br/><br/>

<input id="txt" type="number">

<button onclick="depositar()">Depositar</button>
<button onclick="verConta()">ver Conta</button>


<p id="dep"></p>

2


Without the array it would look like this:

var totalSaque = 0;
	
	function depositar() {
	
		var deposito = document.getElementById("txt").value;

	    totalSaque += parseInt(deposito);
      
      document.getElementById("dep").innerHTML = "--valor depositado--";
		
	}

	function verConta() {
		
		document.getElementById("ex").innerHTML = totalSaque;
    document.getElementById("dep").innerHTML = "";
		
	}
<!DOCTYPE html>
<html>
<head>
	<title>banco</title>
</head>
<body>

<h1 style="float: left;">No Caixa:</h1><h1 id="ex" style="float: left;">0</h1>

<br><br><br><br><br>

<input id="txt" type="number">

<button onclick="depositar()">Depositar</button>
<button onclick="verConta()">ver Conta</button>


<p id="dep"></p>

</body></html>

With the array:

var dinheiro = [];
	
	function depositar() {
	
		var deposito = document.getElementById("txt").value;

	    dinheiro.push(parseInt(deposito));
      
      document.getElementById("dep").innerHTML = "--valor depositado--";
		

		
	}



	function verConta() {
  
   var soma = dinheiro.reduce(function(acumulador, valorAtual) { return acumulador + valorAtual;});
		
		document.getElementById("ex").innerHTML = soma;
    document.getElementById("dep").innerHTML = "";
		
	}
<!DOCTYPE html>
<html>
<head>
	<title>banco</title>
</head>
<body>

<h1 style="float: left;">No Caixa:</h1><h1 id="ex" style="float: left;">0</h1>

<br><br><br><br><br>

<input id="txt" type="number">

<button onclick="depositar()">Depositar</button>
<button onclick="verConta()">ver Conta</button>


<p id="dep"></p>

</body></html>

Browser other questions tagged javascript html array

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