制作一个简单的JavaScript事件与来自用户的输入

问题描述:

制作一个简单的JavaScript事件与来自用户的输入

window.onload= button; 
 

 
function termFunction() { 
 
    var textInput = document.getElementById("textInput"); 
 
    var term= textInput.value; 
 

 
    document.getElementById("list").innerHTML= term.value; 
 
} 
 

 
function button() { 
 
    var button = document.getElementById("button"); 
 
    button.onclick= termFunction(); 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src = "review2.js"></script> 
 
</head> 
 
<body> 
 
    Term: <input type = "text" id = "list"> 
 
    <input type = "button" id = "button" value= "submit"> 
 
</body> 
 
</html>

我试图在文本框中键入有人和它打印出到HTML页面。但我不知道为什么它不起作用。

+3

var textInput = document.getElementById(“textInput”);''你的输入id实际上是'list' –

+3

'button.onclick = termFunction()'sgould可能是'button.onclick = termFunction',因为你不用'不想立即运行'termFunction' –

+0

@DragoşPaulMarinescu但是当我这样做的时候是空的 –

这是当你在读这是不存在的id属性错误

"message": "Uncaught TypeError: Cannot read property 'value' of null"

解决方案

既然你正在阅读的ID 为textInput中不存在的价值身体看到这一行

var textInput = document.getElementById("textInput");

如果你想获得值与名单

var textInput = document.getElementById("list");

<!DOCTYPE html> 
<html> 
<head> 
<script src = "review2.js"></script> 
</head> 
<body> 
Term: <input type = "text" id = "list"> 
<input type = "button" id = "button" value= "submit"> 
<p id="demo"></p> 
<script> 
window.onload= button; 

function termFunction() { 
var textInput = document.getElementById("list").value; 


document.getElementById("demo").innerHTML= textInput; 
} 

function button() { 
var button = document.getElementById("button"); 
button.onclick= termFunction(); 
} 
</script> 
</body> 
</html> 

您输入有一个id = “列表” 终极密码用户输入replac ID。因此,必须使用

var textInput = document.getElementById ("list"); 

,因为它没有任何意义修改输入

document.getElementById("list").innerHTML= term.value; 

我认为你必须检查你的HTML元素的ID的内容

更新: 我举个例子:

function termFunction() { 
 
    var textInput = document.getElementById("list").value; 
 
    if(textInput) 
 
    document.getElementById("res").innerHTML= textInput; 
 
}
Term: <input type = "text" id="list"> 
 
<input type = "button" id = "button" value= "submit" onclick="termFunction()"> 
 
    
 
<br /><br /> 
 
<div id="res"></div>

+0

我编辑我的答案,通过添加运行的代码的例子 – Mahmoud