Question

未捕获的类型错误：无法读取 null 的属性（读取‘值’）javascript

2022-03-08

21421

javascript html

嗨，我正在尝试制作一个仅验证用户名的登录程序，因此当我尝试将用户输入从 html 传递到 javascript 时，它会将其选为 null，有人知道为什么吗？给我这个错误消息： Login2.js:12

Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLButtonElement.document.getElementById.onclick (Login2.js:12:55)

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>StudySkillsApp Log-in</title>
</head>

<body>
<label><b>Username:</b></label>
<input placeholder="Enter Username" id={"myText"}>
<button type="button" id="myButton"> SIGN IN </button>
<script src="Login2.js">
</script>
</body>

</html>

并且 Login2.js（javascript 是）：

if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', afterLoaded);
} else {
    //The DOMContentLoaded event has already fired. Just run the code.
    afterLoaded();
}

function afterLoaded(){
    //Your initialization code goes here. This is from where your code should start
// document.readyState === "complete")
    document.getElementById("myButton").onclick = function(){
        var myName = document.getElementById("myText").value;
        console.log(myName);
    }
};

Answer 1

您需要从 HTML 代码中删除 {} 括号。在输入标签上，将 id={"myText"> 替换为 id="myText"

<input placeholder="Enter Username" id="myText">

此操作可修复此问题。

Answer 2

我在处理我的项目时遇到了同样的错误。如果您确定一切正常但仍出现错误，则很可能是您的外部 js 文件在 DOM 准备就绪之前尝试访问 DOM 元素。您应该在 script 标记中使用 defer 或 async 。

在 <body> 末尾添加 <script> 标记时，它也有效（不推荐用于较长的 HTML 文档，可能会有明显的延迟）。

Answer 3

我在这里寻求帮助来解决我遇到的类似问题，结果发现我的问题是单引号和双引号不匹配。我不知道问题究竟出在哪里，但只要有

<canvas id="background" width="100%" height="100%"></canvas>

匹配

var gameCanvas = document.getElementById("gameCanvas");
var gameContext = gameCanvas.getContext("2d");

就够了