Question

我有一个id =“ firstDiv”的div元素和一个id =“ nameInput”的输入字段。我试图获取用户输入（从id =“ nameInput”）并将其显示在我的div元素中。这不行吗？

document.getElementById("firstDiv").innerHTML = document.getElementById("nameInput").value;

Answer 1

简短的回答是，该代码应该有效。我不能确定没有看到更多上下文，但是我怀疑您遇到的问题是代码在页面加载时运行（在输入元素中键入任何内容之前）。

要检验该假设，请在输入元素中添加一个value='test'属性，我敢打赌，您会看到test出现在您的div中。

您可能想要向输入元素添加事件处理程序，以便只要输入元素的值发生更改，代码就可以运行。

html：

<div id="firstDiv"></div>
<input type="text" id="nameInput" oninput="updateDivFromInput()"></input>

javascript：

function updateDivFromInput() {
  document.getElementById("firstDiv").innerHTML = document.getElementById("nameInput").value;
}

Answer 2

我不确定我是否了解你，

您是否要将“ nameInput”的值添加到div中，因为如果您愿意，请首先尝试：

document.getElementById（“ firstDiv”）。innerHTML = document.getElementById（“ nameInput”）。value;

一些建议，现在，我们有jquery来做这种简单的事情，还有很多其他事情，

在Jquery中，您可以尝试：

$（'＃firstDiv'）。val（'＃nameInput'）;

Answer 3

是的，您的代码将正常工作，如下所示。

document.getElementById("nameInput").addEventListener("keyup", function() {
  document.getElementById("firstDiv").innerHTML = document.getElementById("nameInput").value;
});

<div class="form-group">
  <input type="text" id="nameInput" />
</div>
<div>
  <h3>Output: <span id="firstDiv"></span> </h3>
</div>

我正在尝试使用nameInput的值更新div元素，我的代码对吗？

3 个答案: