由于某种原因，我遇到了这个问题：Uncaught TypeError: Cannot read property 'value' of null on the document.getElementById line。这是什么问题？？我不知道。
HTML 代码：
<html>
<head>
<title>I am a chrome extension</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script src="scripts.js"></script>
</head>
<body bgcolor="#34495e">
<div class="login-card">
<h1>Please Enter Your Birthday</h1><br>
<form>
<input type="date" name="user" placeholder="Username">
<input type="submit" id="age" name="submit" class="login login-submit" value="Submit">
</form>
</div>
</body>
</html>
scripts.js
function getAge()
{
var age = document.getElementById("age").value;
console.log(age);
}
document.getElementById('age').onclick = getAge();
在函数调用函数后使用括号。要将事件绑定到函数，只需引用不带括号的
getAgedocument.getElementById('age').onclick = getAge;
您还应该确保等到 DOM 使用 onload 事件完全加载之后。您还应该花时间仔细阅读正确绑定 javascript 事件。
因为您将脚本包含在头部，并且它在 dom 元素之前加载。 您还需要应用 pswg 的答案。
解决这个问题的方法就是简单地使用window.onload
window.onload = function () {
document.getElementById("age").onclick = getAge;
}
这是因为在评估实际的 html 之前，您将 js 文件包含在头部中。您无法 getElementById 因为该元素还不存在！
一般来说，js 文件包含在底部，位于结束 body 标签的正上方。为了确保这一点，请使用 document.onload();