從輸入中獲取值並在div中顯示

Question

我正在嘗試獲取輸入的值，並在用戶輸入時將其顯示在其下的div中。我想用香草js做。沒有j查詢。

我的HTML：

<div id="userInputBox"> 
<input id="inputText" type="text"  
placeholder="Enter your question" size = "50" onkeyup="myDisplay()"/> 
</div> 
<div class="displayQuestion"></div> 

MY JS：

var input = document.getElementById('inputText').value; 
var showQuestion = document.getElementsByClassName('displayQuestion'); 
function myDisplay(e){ 
showQuestion.innerHTML = input; 
} 

Answer 1

試試這個：

function myDisplay(e) { 
 
    var input = document.getElementById('inputText').value; 
 
    var showQuestion = document.getElementById('displayQuestion'); 
 
    showQuestion.innerHTML = input; 
 
}

<div id="userInputBox"> 
 
    <input id="inputText" type="text" 
 
placeholder="Enter your question" size = "50" onkeyup="myDisplay(this.value)"/> 
 
</div> 
 
<div id="displayQuestion"></div> 
 

Answer 2

在這裏，你去與VannilaJS方式，

建議：更改功能myDisplay()的名稱爲有意義像displayQuestion()

var targetElm = document.getElementsByClassName('displayQuestion'); 
 
var inputElm = document.getElementById('inputText'); 
 

 
function myDisplay() { 
 
    if(targetElm && targetElm.length > 0){ 
 
    targetElm[0].innerHTML = inputElm.value; 
 
    } 
 
}

<div id="userInputBox"> 
 
     <input id="inputText" type="text"  
 
     placeholder="Enter your question" size ="50" onkeyup="myDisplay()"/> 
 
     </div> 
 
    <div class="displayQuestion"></div>