Question

我最近刚接触编程和JavaScript。我不确定为什么这不起作用。我正在尝试将数字插入一个空数组。然后将它们显示到id为“value”的div中。

我的JavaScript：

var array = new Array();
// var array = [];

$(document).ready(function() {
  $('#btn').on('click', function() {
    var $input = $('#input').val();
    array.push($input);
  });
  $('#value').text(array);
  console.log(array);
});

我的HTML：

<div id="number">
  <input type="text" id="input">
  <button id="btn"> Submit </button>
</div>

Answer 1

当文档准备好时，您将渲染一次空数组。向数组添加更多项目不会使用新项目重新呈现DOM。您需要通过将$('#value').text(array);移动到click事件处理程序中来更新每次点击的DOM：

var array = new Array();
// var array = [];

$(document).ready(function() {
  var $input = $('#input');
  var $value = $('#value');

  $('#btn').on('click', function() {
    var val = $input.val();
    array.push(val);
    
    $value.text(array);
    console.log(array);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input">
<button id="btn">Add</button>
<div id="value"></div>

Answer 2

提醒一下，输入字段提供的字符串不是整数。

看看：

＆＃13;

var myArray = [];

$(function() {
  $('#btn').on('click', function() {
    var $input = $('#input').val();
    myArray.push(parseInt($input));
    console.log(myArray)
    $('#value').text("[" + myArray.join(", ") + "]");
  });
});

＆＃13;

.input {
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.input input {
  width: 60px;
  height: 1.25em;
}

.input button {
  padding: .25em .6em;
}

.output {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
  <input type="number" id="input" /> <button id="btn">Add</button>
</div>
<div class="output">
  <div id="value"></div>
</div>

＆＃13;

将值推入空数组？

2 个答案: