Question

我试图从输入字段中获取值，并使用div标签显示它，但未显示任何内容。我在哪里错了？

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

<input type="text" id="inputNum">
<div id="numbers">
</div>

Answer 1

这是代码，

HTML

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

<div id = "numbers">

</div>

JavaScript

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

num.onkeyup= function(e){
 numbersList.innerHTML = e.target.value;
}

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

Answer 2

使用onkeyup事件。这将为您提供文本框中的字符。获取值后，您可以使用innerHTML轻松设置它。考虑以下代码段：

<script>
function setValue(){
   var num = document.getElementById("inputNum").value;
   document.getElementById('numbers').innerHTML = num;
}
</script>
<input type = "text" id ="inputNum" onkeyup="setValue()">
<div id = "numbers">

Answer 3

所以下面发生了几件事。

首先，我们确保整个页面都已加载。为什么？如果脚本是在开始时加载的，则可能无法访问DOM（input，textarea，div等）。当然，如果将Javascript加载到页面的底部，则可以跳过此类问题。

但是，我决定实现(function() {...});自执行功能。这样可以确保您的Javascript在页面加载后运行。

然后，我向inputNum的DOM对象添加了一个事件侦听器。该侦听器将密切关注您关键字的keyup事件。每次按下一个键后，它将在函数内部运行代码。

// This function will execute when the whole page is loaded
// This means that all the DOMs (such as your input and div) will be available
(function() {
  var inputNum = document.getElementById("inputNum");
  inputNum.addEventListener("keyup", function(){
     var num = inputNum.value;
     document.getElementById('numbers').innerHTML = num;
  });  
})();

<input type = "text" id ="inputNum">
<div id = "numbers"></div>

注意：我可以在输入字段中使用属性keyup=''；但是，我决定给您一个可以100％控制的答案。这样，您可以决定哪种事件类型更适合您正在处理的项目。

Answer 4

在var numbersList = document.getElementById('numbers').innerHTML = num;中，省略var numbersList =。代码document.getElementById('numbers').innerHTML = num;将用id =“ numbers”设置Element的innerHTML，并且不会返回任何内容。您的代码将是：

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

或者只是

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

Answer 5

您有一些问题，您的需求尚不完全清楚，但希望这会有所帮助。这是我修复的问题：

此行

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

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

第二，在页面加载后，您编写的javascript大概会运行一次。当时num不包含任何文本，因此没有内容可复制到input。根据您要尝试执行的操作，有几种方法可以解决此问题，但作为一个示例，我将使用上述修复程序编写的代码放入了一个函数中，然后添加了一个按钮并分配了该函数单击按钮即可运行。

如有任何疑问，请告诉我。

div

function copyVal() {
  var num = document.getElementById("inputNum").value;
  var numbersList = document.getElementById('numbers')
  numbersList.innerHTML = num;
}

document.getElementById('copy').onclick = copyVal;

Answer 6

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

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

Answer 7

尝试一下：

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

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

7 个答案: