往数组对象添加文本框内容后页面仅显示[object Object]如何解决

你直接将存储对象的数组赋值给innerHTML属性时，JS会自动调用数组的toString()方法，而数组内的对象元素执行默认toString()方法返回的固定值就是[object Object]，因此你会看到当前的异常输出。你之前直接调用obj.toString()的写法和直接赋值obj的效果完全一致，所以无法解决问题。

下面提供两种常用的处理方案，你可以根据需求选择：

• 方案1：仅需要查看对象完整结构（调试场景用）
  直接用JSON.stringify()将对象序列化为格式化的JSON字符串即可，代码示例：

  document.getElementById("test").innerHTML = JSON.stringify(obj, null, 2);
  

  其中参数null和2的作用是给输出的JSON添加缩进格式化，方便阅读。

• 方案2：需要友好展示数据给用户
  遍历数组拼接成自定义的HTML字符串再赋值，代码示例：

  function btn()
  {
      var name = document.getElementById('Iname').value;
      var price = document.getElementById('Iprice').value;
  
      obj.push({
          iname: name,
          iprice: price
      });
  
      let htmlStr = '';
      obj.forEach(item => {
          // 如果你不需要保留初始化的空对象，可以加上判断过滤空数据
          if(item.iname.trim() && item.iprice.trim()) {
              htmlStr += `<div>商品名称：${item.iname}，商品价格：${item.iprice}</div>`;
          }
      })
      document.getElementById("test").innerHTML = htmlStr;
  }
  

你当前初始化的数组obj默认自带了一个空的对象元素，如果不需要这条空数据，可以直接将初始值改为const obj = []，避免后续展示时出现空条目。

内容的提问来源于stack exchange，提问作者Chris Van Gewden