My push to a array is not working. What am i doing wrong?

Question

I am building a simple system that have the object to generate a orders list to our delivery man. Everything you have to do is insert the values and in real time it will dynamically appearing on the screen.

I want to put a total value of all the orders and it is that where live the problem to me solve. I tried a lot of things but NEVER works. Now, i am trying put all the values in an array to the final calculating and i really don't know what i am doing wrong but the function push is not working. The Array is receiving only one value all the time.

I tried put my code here but the jQuery didn't get but what I want to show is "working"

Somebody can help me to solve this?

 navegation() function navegation() { let goHome = document.getElementById('btn-voltar') goHome.onclick = function() { document.location.href = 'index.html'; } } $(function() { cadastro() function cadastro() { var enviar = $('#btn-enviar') enviar.on('click', function() { //var codigo = document.getElementById('txt-number').val var nome = document.getElementById('txt-nome').value var cidade = document.getElementById('txt-cidade').value var pedido = document.getElementById('txt-nota').value var valor = document.getElementById('txt-valor').value var soma = 0; var val = [] val.push(valor) for (var i = 0; i < val.length; i++) { console.log(val[i]) } console.log(val.length) //console.log(typeof(soma)) inserir() function inserir() { var lista = `<ul class="w20 f15"> <li>` + pedido + `</li> <li>` + nome + `</li> <li>` + cidade + `</li> <li id="valor">` + valor + `</li> <li></li> </ul>` var valorTotal = $('.valorTotal') $('.lista-cadastro').append(lista); } /* var valorTotal = $('.valorTotal') valorTotal.html(soma); console.log(soma) */ return false; }) } imprimir() function imprimir() { $('#btn-imprimir').click(function() { var center = $('.center').css('maxWidth', '1500' + "px"); var none = $('.info-cadastro').css('display', 'none'); var nav = $('.nav-cadastro').css('display', 'none'); var container = $('.container-cadastro').css('height', '100' + '%'); var cadastro = $('.cadastro').addClass('print') var itemCadastrado = $('.itemCadastrado').css('height', '100' + "%"); var btn_imprir = $('#btn-imprimir').addClass('none'); window.print() var center = $('.center').css('maxWidth', '1280' + "px"); var none = $('.info-cadastro').css('display', 'block'); var nav = $('.nav-cadastro').css('display', 'block'); var container = $('.container-cadastro').css('height', '500' + 'px'); var cadastro = $('.cadastro').removeClass('print') var itemCadastrado = $('.itemCadastrado').css('height', '400' + "px") var btn_imprir = $('#btn-imprimir').removeClass('none'); }) } }) /* somarValores() function somarValores() { let valor = document.getElementById('valor').innerHTML = '9' let spanTotal = document.getElementById('valorTotal'); let soma = 0; soma += parseInt(valor) console.log(soma) }*/

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; } html, body { width: 100%; height: 100%; background-color: gray; } input[type="button"], button { outline: none; border: none; cursor: pointer; } ul, li, a { list-style: none; }.center { width: 100%; max-width: 1280px; margin: 0 auto; }.clear { clear: both; } /*-----------------------home/pagina incial------------------------*/.container-home { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }.home { display: flex; justify-content: center; align-items: center; }.homeSelection input[type="button"] { display: block; width: 250px; padding: 13px 0; border-radius: 30px; margin: 20px auto; font-size: 25px; cursor: pointer; transition: .4s ease; }.homeSelection input[type="button"]:hover { background-color: blue; color: white; }.borderHome { width: 10px; height: 200px; background-color: black; margin: 0 30px; }.quemHOme h1 { font-size: 50px; }.quemHOme h2 { font-size: 30px; }.quemHOme h2:last-of-type { margin-left: 20px; } /*-----------------------------home/pagina incial-----------------*/ /*-----------------------------Container-cadastros-----------------*/.container-cadastro { display: flex; flex-wrap: wrap; height: 500px; justify-content: space-between; position: relative; top: 50%; transform: translateY(-50%); }.container-cadastro input { width: 200px; padding: 10px; }.container-cadastro input[type="button"], #btn-reset, #btn-enviar { transition: .4s ease; border: none; border-radius: 20px; font-size: 20px; cursor: pointer; }.container-cadastro input[type="button"]:hover, #btn-reset:hover, #btn-enviar:hover { background-color: blue; color: white; }.cadastro { width: 55%; position: relative; }.info-cadastro { width: 40%; }.cadastro input[type="button"] { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); }.itemCadastrado { width: 100%; height: 400px; background-color: white; overflow-y: auto; }.print { width: 100%; height: 100%; transition: .5s; animation-name: printAnimation; animation-duration: 1s; }.none { display: none; }.w20 { display: flex; }.w20 li { width: 20%; text-align: center; border: 1px solid black; border-collapse: collapse; padding: 1px 0; font-weight: bold; }.f15 { font-size: 15px; font-family: 'Courier New', Courier, monospace; }.info-cadastro input:nth-of-type(2) { width: 400px; } #btn-reset, #btn-submit { margin: 30px 10px; }.nav-cadastro { position: absolute; bottom: 20px; right: 70px; }.nav-cadastro input { margin: 0 10px; } /*-----------------------------Container-cadastros-----------------*/ @media screen and (max-width:1100px) { #btn-reset, #btn-enviar { width: 80%; }.nav-cadastro { bottom: -50px; } } @media screen and (max-width:1000px) {.cadastro { width: 55%; position: relative; }.info-cadastro { width: 40%; }.info-cadastro input:nth-of-type(2) { width: 100%; } } @media screen and (max-width:500px) {.home { flex-direction: column-reverse; }.borderHome { width: 100%; height: 10px; margin: 20px auto 5px; }.info-cadastro input { width: 100%; }.container-cadastro { justify-content: center; }.cadastro { width: 95%; position: relative; }.info-cadastro, #btn-reset, #btn-enviar { width: 95%; }.nav-cadastro { position: static; bottom: 0px; }.nav-cadastro input { margin: 20px 10px; } }

 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transportes</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container-cadastro center"> <div class="cadastro"> <div class="itemCadastrado"> <header class="header-cadastro"> <ul class="w20"> <li>N° Nota</li> <li>Nome</li> <li>Cidade</li> <li>Valor</li> <li>Forma de pag.</li> </ul> <p id="demo"></p> </header> <div class="lista-cadastro" id="lista-cadastro"> </div> <:--grupo--> <div class="total"> <ul class="w20"> <li></li> <li></li> <li></li> <li>Total:</li> <li> <h4>R$:<span class="valorTotal" id="valorTotal"></span></h4> </li> </ul> </div> <:--total--> </div> <:--itemCadastrado--> <input type="button" value="Imprimir" id="btn-imprimir"> </div> <:--cadastro--> <div class="info-cadastro"> <form class="form"> <p>Código Cliente:</p> <input type="number" id="txt-number" name="codigo" disabled> <p>Nome cliente.</p> <input type="text" id="txt-nome" name="nome"> <p>Cidade:</p> <input type="text" id="txt-cidade" name="cidade"> <p>N° Nota:</p> <input type="number" id="txt-nota" name="n_nota"> <p>Valor:</p> <input type="number" id="txt-valor" name="valor"> <br> <input type="reset" id="btn-reset" value="Apagar"> <input type="submit" id="btn-enviar" value="Enviar" name="enviar"> </form> </div> <!--info-cadastro--> <nav class="nav-cadastro"> <input type="button" value="Voltar" id="btn-voltar"> <input type="button" value="Alterar" id="btn-alterar" disabled> </nav> <!--nav-cadastros--> </div> <!-- /.container-cadastro --> </body>

Answer 1

You are declaring the array val inside the event handling function, that it is emptied every time you clicked #btn-enviar .

You should declare the array in global scope, ie outside the event handler to keep the values stored in the array.