Question

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Assignment 7</title>
    <link rel="stylesheet" href="css/style7.css">
    <meta charset="utf-8">
</head>
<body>
    <div id="page">
        <h1>List King</h1>
        <h2 id="noteEntered">Audio Note</h2>
        <form action="example.org/">;
            <label for="noteInput">Enter note name:</label> 
            <input type="text" id="noteInput" />
            <div id="buttons">
                <a data-state="record" href="">record</a>
            </div>
        </form>
    </div>
    <script src="javascript/assg07.js"></script>
</body>
</html>

使用Javascript：

var usersName, noteEntered, textInput, targetName;

usersName.addEventListener("input", writeLabel, false);

在“usersName.addEventListener（”input“，writeLabel，false）的最后一行;”有一个错误“Uncaught TypeError：无法读取属性'addEventListener'未定义”

Answer 1

您正在尝试使用与HTML元素id值相同的名称设置的全局对象属性。这是在标准中提供的而不是不正确的。但是，然后您将相同的标识符名称重新定义为行

中的变量

var usersName, noteEntered, textInput, targetName;

将变量初始化为undefined，因为它们在声明中没有初始值设定项。如果HTML文件中稍后遇到与变量名称相同的id的HTML元素ID，则声明优先并且不会更改或重新初始化。

此外，如果var声明在全局范围内执行，则替换同名的窗口属性（因此在HTML不起作用之后也包括脚本）。

您至少需要从此变量声明列表中删除usersName和nodeEntered，以允许为这些名称的全局属性指定HTML元素值。

有一些替代方法，例如使用let代替var，然后访问元素作为全局对象的属性（例如window.usersName），或者使用document.getElementById( idValue)访问元素。后一种方法是最常见的。

Answer 2

首先，您应该检查变量usersName的存在。

if (typeof usersName !== undefined) {
// here your code
}

Javascript -Uncaught TypeError：无法读取属性

2 个答案: