为何我的代码向购物列表添加内容时仅插入null？

嘿，我一眼就发现问题出在哪啦！

你现在遇到的核心问题是：你没有获取输入框里的实际内容，而是直接把整个输入框DOM元素拼进了列表里。

具体分析 #

你代码里的这行：

var gottaBuy = document.getElementById("item");

获取的是整个输入框的DOM对象，而不是用户输入的文本内容。当你把这个DOM对象直接和HTML字符串拼接时，JavaScript会自动把它转换成字符串形式，结果就是[object HTMLInputElement]（你看到的null可能是环境特殊导致的表现，但本质原因是一样的）。

修复方案 #

我们需要获取输入框的value属性，这才是用户输入的内容。这里有两种简单的修复方式：

方式1：每次点击时直接获取输入框的值

修改你的两个添加函数，直接获取输入框的value：

function sortItem1() { 
  document.getElementById("addToMarket").addEventListener("click", addToMarketList); 
} 
function sortItem2() { 
  document.getElementById("addToOnline").addEventListener("click", addToOnlineList); 
} 

var listForMarket = ""; 
var listForOnlineShop = ""; 

function addToMarketList() { 
  // 直接获取输入框的实际内容
  var inputValue = document.getElementById("item").value;
  // 新增判断：避免添加空内容或纯空格
  if(inputValue.trim()){
    listForMarket += `<li>${inputValue}</li>`;
    document.getElementById("marketList").innerHTML = listForMarket;
    document.getElementById("item").value = "";
  }
} 

function addToOnlineList() { 
  var inputValue = document.getElementById("item").value;
  if(inputValue.trim()){
    listForOnlineShop += `<li>${inputValue}</li>`;
    document.getElementById("onlineList").innerHTML = listForOnlineShop;
    document.getElementById("item").value = "";
  }
} 

window.addEventListener("load", sortItem1); 
window.addEventListener("load", sortItem2);

方式2：保留DOM元素引用，每次取它的value

如果你想保留gottaBuy的定义，只需要在拼接时加上.value即可：

var gottaBuy = document.getElementById("item");
var listForMarket = ""; 
var listForOnlineShop = ""; 

function addToMarketList() { 
  var inputValue = gottaBuy.value;
  if(inputValue.trim()){
    listForMarket += `<li>${inputValue}</li>`;
    document.getElementById("marketList").innerHTML = listForMarket;
    gottaBuy.value = "";
  }
} 

额外优化建议 #

• 新增的inputValue.trim()判断，可以避免用户输入空内容或纯空格时添加无效项
• 用ES6模板字符串（`${变量}`）代替传统字符串拼接，代码会更清晰易读
• 你原来的addToOnlineList函数末尾少了一个分号，虽然不影响运行，但规范的代码应该补上

HTML部分不需要修改，保持原样即可：

<h1>What would you like to add?</h1> 
<input type="text" id="item" /> 
<button type="button" id="addToMarket">Markt</button> 
<button type="button" id="addToOnline">Online</button> 
<h2>Buy at a store:</h2> 
<ul id="marketList"></ul> 
<h2>Buy online:</h2> 
<ul id="onlineList"></ul>

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