如何使用JavaScript从div的输入字段中获取输入值

我试图从输入字段中获取值，并使用

div

标记显示它，但它没有显示任何内容。我错在哪里

var num = document.getElementById("inputNum").value;
var numbersList = document.getElementById('numbers').innerHTML = num;

这是代码

HTML

<input type="text" id="inputNum">

<div id = "numbers">

</div>

---

keyup

将检测正在键入的每个键，并将显示到

div

使用

onkeyup

事件。这将为您提供文本框中的永久字符。获取值后，可以使用

innerHTML

轻松设置该值。考虑下面的片段：

函数setValue（）{
var num=document.getElementById（“inputNum”）.value；
document.getElementById（'numbers'）。innerHTML=num；
}

下面发生了一些事情

首先，我们确保加载整个页面。为什么？如果脚本在开始时加载，则访问DOM时可能会遇到问题（

input

，

textarea

，

div

等）。当然，如果在页面底部加载Javascript，则可以跳过此类问题

但是，我决定实现

（function（）{…}）自执行功能。这将确保Javascript在加载页面后运行

然后，我向
inputNum
的DOM对象添加了一个事件侦听器。此侦听器将关注关键字的
keyup
事件。每次按下一个键后，它都会运行函数中的代码


//加载整个页面时将执行此函数
//这意味着所有DOM（如您的输入和div）都将可用
（功能（）{
var inputNum=document.getElementById（“inputNum”）；
addEventListener（“keyup”，function（））{
var num=inputNum.value；
document.getElementById（'numbers'）。innerHTML=num；
});  
})();

var numbersList=document.getElementById（'numbers'）.innerHTML=num只需省略
var numbersList=
。Codedocument.getElementById（'numbers'）。innerHTML=num
将使用Id=“numbers”设置元素的innerHTML，并且不会返回任何内容。
您的代码将是：

var num = document.getElementById("inputNum").value;
document.getElementById('numbers').innerHTML = num;

var num = document.getElementById("inputNum").value;
document.getElementById('numbers').innerHTML = num;

或者只是

document.getElementById('numbers').innerHTML = document.getElementById("inputNum").value;

你有一些问题，你的需求并不完全清楚，但希望这会有所帮助。以下是我解决的问题：

这条线

var numbersList = document.getElementById('numbers').innerHTML = num;

包含错误，因为它有两个等号。我将其替换为两行，首先标识元素并将其保存到变量
numbersList
，然后将
numbersList
的
innerHTML
属性设置为上面发现的
num

其次，当页面加载时，您编写的javascript可能会运行一次。此时，
输入
不包含文本，因此没有任何内容可复制到
div
。根据您尝试执行的操作，有几种方法可以处理此问题，但作为一个示例，我将您编写的代码（使用上述修复）放入一个函数中，然后添加一个按钮，并指定该函数在单击按钮时运行

如果你有任何问题，请告诉我


函数copyVal（）{
var num=document.getElementById（“inputNum”）.value；
var numbersList=document.getElementById（'numbers'）
numbersList.innerHTML=num；
}
document.getElementById（'copy'）。onclick=copyVal

复制文本
尝试以下操作：

请阅读和，然后相应地编辑您的问题。您需要使用onchange事件来显示div中的每个键。如果代码无效，请删除赋值部分并仅应用文本，您不需要存储在numberslist中，事件完全是另一个故事谢谢你这么多…这么简单…我真的想要这个…它成功了…如果你能通过点击勾号将我的答案标记为已接受，那就太好了：）我是新来的堆栈溢出我试图向上投票给你，但我的投票没有被添加，因为声誉分数低。但是你能将答案标记为点击勾号图标接受？感谢您解释并澄清疑问。我跳过了“两个赋值运算符”的错误…非常感谢…谢谢。它也起作用了…我清楚地表达了我的怀疑…谢谢大家欢迎这么做。请花些时间阅读，然后你可以相应地编辑你的答案。
var numbersList = document.getElementById('numbers').innerHTML = num;

var num = document.getElementById("inputNum").value;
document.getElementById('numbers').innerHTML = num;

var num = document.getElementById("inputNum");
var numbersList = document.getElementById('numbers');

num.addEventListener('change', function(){
  numbersList.textContent = this.value;
})