如何获取JavaScript动态创建的输入框中的表单输入值？

问题根源 #

你的代码存在两个核心问题导致无法获取输入值：

1. DOM挂载逻辑错误：在startGame函数中，创建id为guess的input元素后，立刻尝试调用document.getElementById("guess").appendChild(inputField)——此时这个input还未被添加到DOM树中，getElementById找不到目标元素，直接导致input无法正常挂载到页面上，自然compareInput拿不到任何值。
2. 未处理类型转换：input元素的value属性返回字符串类型，直接与数字类型的随机数对比会出现逻辑错误（比如字符串"10"会被判定为小于"2"）。

修正后的代码实现 #

第一步：页面结构（提前准备父容器）

在HTML中提前定义承载游戏元素的容器，避免动态创建元素时找不到挂载目标：

<!-- 游戏元素容器 -->
<div id="game-container"></div>
<!-- 操作按钮 -->
<button onclick="startGame()">开始游戏</button>
<button onclick="compareInput()">提交猜测</button>

第二步：修正startGame函数

将创建好的input元素挂载到已存在的父容器中，同时避免重复点击生成多个输入框：

function startGame(){
    // 获取页面上已存在的游戏容器
    const gameContainer = document.getElementById("game-container");
    // 清空容器，防止多次点击重复生成输入框
    gameContainer.innerHTML = "";

    // 创建输入框元素
    const inputField = document.createElement("input");
    inputField.type = "number";
    inputField.id = "guess";
    inputField.placeholder = "输入1-100之间的数字";

    // 将输入框添加到游戏容器中
    gameContainer.appendChild(inputField);
}

第三步：完善compareInput函数

添加元素存在性校验、类型转换，以及完整的对比逻辑：

// 提前生成目标随机数（1-100）
let targetNumber = Math.floor(Math.random() * 100) + 1;

function compareInput(){
    // 获取输入框元素
    const inputElement = document.getElementById("guess");
    
    // 校验输入框是否存在（用户未点击开始游戏的情况）
    if (!inputElement) {
        alert("请先点击「开始游戏」！");
        return;
    }

    // 将输入值转换为数字，空值或非数字会转为NaN
    const inputValue = Number(inputElement.value);
    
    // 校验输入是否为有效数字
    if (isNaN(inputValue) || inputValue < 1 || inputValue > 100) {
        alert("请输入1-100之间的有效数字！");
        inputElement.value = "";
        return;
    }

    // 对比逻辑
    if (inputValue === targetNumber) {
        alert(`恭喜猜对了！目标数字是${targetNumber}`);
        // 猜对后重新生成目标数字
        targetNumber = Math.floor(Math.random() * 100) + 1;
        inputElement.value = "";
    } else if (inputValue > targetNumber) {
        alert("猜大了，再试试！");
        inputElement.value = "";
    } else {
        alert("猜小了，再试试！");
        inputElement.value = "";
    }
}

额外注意事项 #

• 每次提交猜测后清空输入框，提升用户体验；
• 添加输入范围校验，避免用户输入不符合规则的内容；
• 如果需要多次重置游戏，可在猜对后自动调用startGame函数重新生成输入框。

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