我对数组的推送不起作用。我究竟做错了什么？答案

【问题标题】：My push to a array is not working. What am i doing wrong?我对数组的推送不起作用。我究竟做错了什么？
【发布时间】：2022-08-18 21:41:21
【问题描述】：

我正在构建一个简单的系统，该系统具有为我们的送货员生成订单列表的对象。您所要做的就是插入值，它会实时动态地出现在屏幕上。

我想计算所有订单的总价值，这就是我要解决的问题所在。我尝试了很多东西，但从来没有奏效。现在，我正在尝试将数组中的所有值放入最终计算中，我真的不知道我做错了什么，但函数推送不起作用。数组一直只接收一个值。

我试着把我的代码放在这里，但 jQuery 没有得到，但我想展示的是 \"working\"

有人可以帮我解决这个问题吗？

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>

欢迎来到堆栈溢出！这是您开始熟悉using a debugger 的好机会。当您在调试器中单步执行代码时，哪个操作首先会产生意外结果？该操作中使用的值是什么？结果如何？预期的结果是什么？为什么？要了解有关此社区的更多信息以及我们如何为您提供帮助，请从 tour 开始并阅读 How to Ask 及其链接资源。
每次事件发生时都会重新初始化 var val = []。您是否将所有值作为一个整体存储在任何地方？
作为旁注：<li id=\"valor\">，id 在文档中必须是唯一的。最好在这里使用class。

标签： javascript html jquery css forms

【解决方案1】：

您在事件处理函数中声明数组val，每次单击#btn-enviar 时它都会被清空。

您应该在全局范围内声明数组，即在事件处理程序之外以保留存储在数组中的值。

【讨论】：