input元素innerHTML返回空字符串，无法正确获取输入值如何解决

问题原因 #

• <input> 属于自闭合标签，不存在内部子节点与HTML内容，使用 .innerHTML 获取输入框内容时，返回值永远是空字符串，这是本次问题的核心诱因。
• 输入框中用户输入的内容，存储在DOM元素的 value 属性中，而非innerHTML属性。
• 若你没有在函数外部提前声明并初始化空数组choice，代码运行时还会抛出choice未定义的报错。

修复方案 #

1. 修正输入内容取值逻辑 #

将原JS代码中取值行：

var textappend = document.getElementById("text").innerHTML;

替换为：

// 额外加trim()过滤首尾空白，避免全空格的无效内容被录入
var textappend = document.getElementById("text").value.trim();

2. 提前初始化choice数组 #

在函数外的全局作用域提前声明数组：

// 放在addtolist函数定义之前
const choice = [];

可选优化：数组渲染效果调整 #

你当前直接将数组赋值给innerHTML，会默认把数组转为逗号拼接的纯字符串，展示效果较差。如果想要列表形式的展示，可以修改渲染逻辑：

// 每个数组项转为li标签拼接后渲染
document.getElementById("list").innerHTML = choice.map(item => `<li>${item}</li>`).join('');

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