如何在数组元素超过2个时显示新增按钮？JS问题求助

我正在学习JavaScript，编写了一段实现添加股票代码到列表的功能代码，希望当TickerChosenList数组的元素数量超过2个时，显示名为testout的按钮，但当前的判断逻辑无法生效，看不到该按钮。期望当数组元素超过2个时，testout按钮和AddStock按钮都能显示。

代码如下：

var AddStock = document.createElement('button'); //Button for adding the ticker to the list
var Ticker = document.createElement('input'); //Input of the tickers that the user is going to use
var TickerChosenContainer = document.createElement('div'); //Container for all the tickers that the user is going to use
var TickerChosenList = []; //This array lets me store all the generated values

//Button Add Stock
AddStock.textContent = 'Add stock';
AddStock.id = 'AddStockBtn';

//Ticker input
Ticker.setAttribute('placeholder', 'Enter stock symbol')
Ticker.id = 'Ticker';

//Print on display
document.body.appendChild(Ticker);
document.body.appendChild(AddStock);
document.body.appendChild(TickerChosenContainer);

//If 'Add Stock' gets clicked then create a new paragraph with the ticker name just added
AddStock.addEventListener('click', function (){
  var tickerChosen = document.createElement('p'); 
  tickerChosen.textContent = Ticker.value; 
  TickerChosenContainer.appendChild(tickerChosen);
  tickerChosenList.push(tickerChosen); 
});

if (tickerChosenList.length > 2) {
  var testout = document.createElement('button');
  document.body.appendChild(testout);
} else {

}

问题原因 #

1. 变量大小写不匹配：JavaScript是大小写敏感语言，你声明的数组是TickerChosenList（首字母大写T），但在点击事件和判断逻辑中用的是tickerChosenList（首字母小写t），导致数组从未正确添加元素，长度始终为0。
2. 判断逻辑只执行一次：页面加载完成后，if判断仅运行一次，此时数组为空，后续点击添加按钮不会再次触发该判断，所以永远不会创建testout按钮。

解决方法 #

修正变量大小写，并将判断逻辑移至点击事件内部，每次添加元素后检查数组长度，同时避免重复创建按钮：

var AddStock = document.createElement('button');
var Ticker = document.createElement('input');
var TickerChosenContainer = document.createElement('div');
var TickerChosenList = [];
let testoutBtn = null; // 提前声明按钮变量，避免重复创建

AddStock.textContent = 'Add stock';
AddStock.id = 'AddStockBtn';

Ticker.setAttribute('placeholder', 'Enter stock symbol')
Ticker.id = 'Ticker';

document.body.appendChild(Ticker);
document.body.appendChild(AddStock);
document.body.appendChild(TickerChosenContainer);

AddStock.addEventListener('click', function (){
  var tickerChosen = document.createElement('p'); 
  tickerChosen.textContent = Ticker.value; 
  TickerChosenContainer.appendChild(tickerChosen);
  TickerChosenList.push(tickerChosen); // 修正变量名大小写

  // 添加后立即检查数组长度
  if (TickerChosenList.length > 2 && !testoutBtn) {
    testoutBtn = document.createElement('button');
    testoutBtn.textContent = 'testout'; // 给按钮添加文本，方便识别
    document.body.appendChild(testoutBtn);
  }
});

修改说明 #

• 统一使用TickerChosenList作为数组变量名，确保数据正确添加
• 将判断逻辑移到点击事件内部，每次添加股票代码后都会触发检查
• 声明testoutBtn变量存储按钮实例，避免重复创建多个testout按钮
• 给testout按钮添加文本内容，方便确认按钮是否显示

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