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

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 >
                            <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 >
    <div >
      <div >
        <header >
          <ul >
            <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  id="lista-cadastro">

        </div>
        <!--grupo-->
        <div >
          <ul >
            <li></li>
            <li></li>
            <li></li>
            <li>Total:</li>
            <li>
              <h4>R$:<span  id="valorTotal"></span></h4>
            </li>
          </ul>
        </div>
        <!--total-->
      </div>
      <!--itemCadastrado-->
      <input type="button" value="Imprimir" id="btn-imprimir">
    </div>
    <!--cadastro-->
    <div >
      <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 >
      <input type="button" value="Voltar" id="btn-voltar">
      <input type="button" value="Alterar" id="btn-alterar" disabled>
    </nav>
    <!--nav-cadastros-->
  </div>
  <!-- /.container-cadastro -->
</body>

CodePudding user response：

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.