无法将DOM元素.value属性存入变量？JS数组DOM操作问题排查

一、核心问题原因 #

你直接写let input = document.getElementById("text").value;得到undefined，是因为代码执行时DOM还没加载完成——此时document.getElementById("text")找不到目标元素，返回null，访问null.value自然就是undefined。

而如果只存元素引用let input = document.getElementById("text");，后续点击按钮时再取input.value，此时页面已经完全加载，元素存在，就能拿到正确的输入内容。

二、代码里的其他问题及修复 #

除了这个核心问题，你的代码还有几个影响功能的bug：

• reset函数无效：para.removeChild()必须传入要移除的子元素，直接调用会报错。正确做法是清空列表内容或者重置数组后重新渲染。
• createList无法重复渲染：你用forEach一次性生成了初始列表，但forEach不会返回可复用的函数，所以点击Add按钮时return createList根本不会重新生成新列表。得把渲染逻辑封装成可重复调用的函数。
• 按钮传参冗余：HTML里updateList(input.value)依赖全局变量，不如直接在函数内部获取输入值，代码更健壮。

修复后的完整代码 #

HTML

<div>
    <form>
        <input type="text" id="text">
        <button onClick="updateList()" type="button">Add</button>
        <button onClick="reset()" type="button">Clear</button>
    </form>
</div>
<div id='para'>
    <!--list goes here-->
</div>

JavaScript

let input = document.getElementById("text");
let groceryList = ["Grapes", "Juice", "Apples"];
let para = document.getElementById('para');
let unorderedList = document.createElement('ul');
para.appendChild(unorderedList);

// 封装渲染列表的函数，可重复调用
function renderList() {
    // 先清空现有列表内容
    unorderedList.innerHTML = '';
    groceryList.forEach((grocery) => {
        let li = document.createElement('li');
        li.innerText = grocery;
        li.className = "grocery-item";
        unorderedList.appendChild(li);
    });
}

// 页面加载完成后先渲染初始列表
renderList();

// 清空列表函数
function reset() {
    groceryList = [];
    renderList();
}

// 添加元素函数
function updateList() {
    const item = input.value.trim();
    if (item) { // 过滤空输入
        groceryList.push(item);
        renderList();
        input.value = ''; // 添加后清空输入框
    }
}

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