JavaScript使用工厂模式创建对象操作DOM的方法及代码问题排查

• 构造函数调用未加new关键字：调用createAccount构造对象时没有加new，导致函数内部this指向全局window对象，且函数无返回值，最终account变量为undefined，数组中存入的都是空值。
• 属性名不匹配：构造函数中定义的余额属性名为AccountBalance，但循环读取时误用了balance，导致无法正确获取余额值。
• 未完成textarea赋值逻辑：没有将数组中所有账户的信息拼接为字符串，也没有赋值给mytextarea的value属性，无法在页面展示结果。
• 余额类型未转换：从输入框获取的deposit值是字符串类型，建议转换为数字类型方便后续业务逻辑处理。
• 函数逻辑冗余：createAccount构造函数定义在makeCounter内部重复声明，同时全局又定义了重名的createAccount函数，逻辑混乱容易出现作用域问题。

原有HTML代码无需修改，替换为如下JavaScript代码即可实现预期效果：

var accountInfoList = [];

// 账户构造函数
function Account(AccountName, AccountBalance) {
  this.AccountName = AccountName;
  this.AccountBalance = AccountBalance;
}

function createAccount() {
  // 获取输入值并做基础校验
  let name = document.getElementById('mytext').value.trim();
  let balance = Number(document.getElementById('deposit').value.trim());
  if (!name || isNaN(balance)) {
    alert('请输入合法的账户名和存款金额');
    return;
  }
  // 生成账户对象存入数组
  const account = new Account(name, balance);
  accountInfoList.push(account);
  // 拼接所有账户信息
  let outputContent = '';
  accountInfoList.forEach(item => {
    outputContent += `Account Name: ${item.AccountName} Balance: ${item.AccountBalance}\n`;
  });
  // 更新到文本框
  document.getElementById('mytextarea').value = outputContent;
  // 可选：清空输入框方便下一次输入
  document.getElementById('mytext').value = '';
  document.getElementById('deposit').value = '';
}

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