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>

Welcome to Stack Overflow! This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Aug 18 '22 at 13:36
var val = [] is being reinitialized every time the event occurs. Are you storing all the values as a whole anywhere? — Patrick, Aug 18 '22 at 13:38

score 1 · Accepted Answer · answered Aug 18 '22 at 13:39

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, i.e. outside the event handler to keep the values stored in the array.

answered Aug 18 '22 at 13:39

ChopSuey

81
3

Thank you very much... You are an Angel!! – Samuel Matos Aug 19 '22 at 13:31

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

1 Answers1