如何使用JavaScript從div的輸入字段中獲取輸入值

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>

Java腳本

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對象添加了一個事件偵聽inputNum 。 該偵聽器將密切關注關鍵字的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的屬性numbersList到num上述發現的。

其次，當頁面加載時，您編寫的javascript大概將運行一次。 當時input內容不包含任何文本，因此沒有任何內容可復制到div 。 根據您要嘗試執行的操作，有幾種方法可以解決此問題，但作為一個示例，我將使用上述修復程序編寫的代碼放入了一個函數中，然后添加了一個按鈕並分配了該函數單擊按鈕時運行。

請讓我知道，如果你有任何問題。

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

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

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;