向空数组推入值失败？JavaScript新手求助代码问题

嘿，我来帮你捋捋这段代码为啥跑不起来～你想要实现的是点击按钮把输入的数字存进数组，然后在#value的div里显示数组内容对吧？现在代码有几个关键小问题，我给你拆解下：

问题1：显示数组的代码触发时机错了 #

你把$('#value').text(array);写在按钮的click事件外面了，这意味着页面刚加载完就会执行这行代码，那时候数组还是空的！之后你点击按钮往数组里加元素，这行代码也不会再跑，所以div里一直显示空内容。

问题2：控制台打印的时机不对 #

console.log(array)同样在click事件外面，只会在页面加载时打印一次空数组，之后点击按钮加元素，控制台也不会更新显示最新的数组状态。

问题3：输入值是字符串类型（可选优化） #

输入框用val()拿到的内容是字符串，如果要存的是数字，最好转成数值类型，不然数组里存的其实是字符串哦～

修复后的完整代码 #

HTML（补全了按钮部分，你原来的代码里没写全）

<div id="number">
  <input type="text" id="input">
  <button id="btn">添加数字</button>
</div>
<div id="value"></div>

JavaScript

// 用[]创建数组比new Array()更简洁，效果完全一样
let array = []; 

$(document).ready(function() {
  $('#btn').on('click', function() {
    // 把输入的字符串转成数字，同时过滤无效输入
    const inputNum = Number($('#input').val());
    if (!isNaN(inputNum)) {
      array.push(inputNum);
      // 每次添加元素后，立刻更新div的显示内容
      $('#value').text(array.join(', ')); // 用逗号分隔，显示更清晰
      // 点击后打印数组，能看到实时变化
      console.log(array);
      // 清空输入框，方便继续输入
      $('#input').val('');
    } else {
      alert('请输入有效的数字呀～');
    }
  });
});

核心修改说明 #

1. 把更新显示和打印的代码移到click事件内部：每次点击按钮添加元素后，都会同步更新div内容和控制台输出，这样你能看到实时变化。
2. 添加输入有效性判断：避免用户输入非数字内容时，把无效值塞进数组。
3. 优化显示格式：用join(', ')把数组转成逗号分隔的字符串，比直接显示数组的默认格式更友好。
4. 清空输入框：提升使用体验，不用手动删之前的输入。

这样改完，你的代码就能正常实现需求啦～

内容的提问来源于stack exchange，提问作者Kasador