如何从通过 Javascript function 动态创建的输入字段访问表单输入？

Question

我是编程新手，希望您能帮助我解决这个我正在尝试构建的小型数字比较游戏。

我有两个功能。 第一个 function 通过按下按钮在 HTML 中创建了运动场。 在运动场上创建的元素之一是输入字段，玩家可以在其中输入他们的猜测。 在第二个 function 中，我比较了两个数字——一个是随机生成的，另一个是玩家输入的。 不幸的是，我无法访问玩家输入的号码。

也许有人有了主意。 非常感谢你。

这就是函数的样子：

function startGame(){
(...)
    const inputField = document.createElement("input");
    inputField.setAttribute("type", "number");
    inputField.setAttribute("id", "guess");

    document.getElementById("guess").appendChild(inputField);
}

function compareInput(){
    let inputValue = document.getElementById("guess").value;
(...)
}

Answer 1

我实施了一个概念验证，它可能与您的要求不同，但它应该可以帮助您找到正确的路径。 首先，让我们确保新字段具有值。 接下来，确保我们 append 是它来document而不是它本身。

 function startGame(){ const inputField = document.createElement("input"); inputField.setAttribute("type", "number"); inputField.setAttribute("id", "guess"); inputField.value = parseInt(Math.random() * 10) + 1; document.body.appendChild(inputField); } function compareInput(){ let inputValue = document.getElementById("guess").value; console.log(inputValue); } startGame(); compareInput();

Answer 2

1. 您正在尝试 append 自己“猜测”。 那不是那样的。 尝试将它 append 到另一个 div 或 body。

2. 您有两个具有相同 ID 的元素。 第一个是包装器，第二个是输入。 因此，您的 function compareInput()正在尝试获取包装器的值。