为什么我可以选择使用 nodeValue 而不是 Value？ [复制]答案

【问题标题】：Why i'm getting the option to use nodeValue insted of just Value? [duplicate]为什么我可以选择使用 nodeValue 而不是 Value？ [复制]
【发布时间】：2017-09-27 12:09:11
【问题描述】：

我正在编写一个获取姓名、地址和电话号码的 html 页面来练习验证。当 javascript 函数尝试获取输入中值的长度时，我收到此错误：“Uncaught TypeError: Cannot read property 'length' of null”

我不知道 nodeValue 是什么意思，但我只是想获取输入中的值。

这是javascript中给我错误的代码部分：

function Validate(nameInput, lastNameInput, addressInput, phoneInput)
{

var errorSpan = document.getElementById("errorSpan");
var okSpan = document.getElementById("okSpan");

var nameErrSpan = document.getElementById("nameErrSpan");
var lastNameErrSpan = document.getElementById("lastNameErrSpan");
var addressErrSpan = document.getElementById("addressErrSpan");
var phoneErrSpan = document.getElementById("phoneErrSpan");

var nameLength = nameInput.nodeValue.length;
var lNameLength = lastNameInput.nodeValue.length;
var addressLength = addressIput.nodeValue.length;
var phoneLength = phoneInput.nodeValue.length;

我需要更改哪些内容才能获取输入中的值并对其进行测量？

这是我的 html 代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Validation Form</title>
</head>
<body>

<div>
    <span>First name:</span><br />
    <input type="text" id="firstName" /> <span id="nameErrSpan" class="nHidden">Name Must Be Between 3 - 10 Letters</span>
    <br>


    <span>Last name:</span><br />
    <input type="text" id="lastName" /> <span id="lastNameErrSpan" class="lnHidden">Last Name Must Be Between 3 - 10 Letters</span>
    <br>

    <span>Address:</span><br />
    <input type="text" id="address" /> <span id="addressErrSpan" class="adHidden">Address Must Be Between 10 - 25 Letters</span>
    <br>

    <span>Phone number:</span><br />
    <input type="text" id="phoneNumber" /> <span id="phoneErrSpan" class="pHidden">Phone Must Be Between 3 - 10 Digits</span>
    <br>

    <button onclick="Validate(firstName, lastName, address, phoneNumber)">Check</button><br />

    <span id="errorSpan" class="hidden">Missing fields</span><br />
    <span id="okSpan" class="hidden">All fields are filled</span><br />

    <button onclick="reset()">Reset</button><br />


</div>

<link rel="stylesheet" href="registrationForm.css">
<script src="registrationForm.js"></script>
</body>
</html>

【问题讨论】：

如果您的<span>s 中有<input> 元素，则需要获取输入元素，然后使用.value 获取输入其中的文本。
@Barmar 我正在获取输入元素。您可以在 javascript 页面中的函数名称之后的 parantsis 中看到它们。但我也将它们与“getElementById”放在单独的变量中，所以我得到了覆盖
如果我是你，我不会依赖自动全局变量，但这是你的决定。他们现在在规范中。但是有这么多的全局变量，很容易使用 id，它不会因为与另一个全局变量（例如：name）冲突而最终创建自动全局变量。
@T.J.Crowder 好的，我接受你的意思。我将所有的“nodeValue”都更改为“Value”，但现在我得到了同样的错误，只是“null”变成了“Undefind”。

标签： javascript html validation nodevalue

【解决方案1】：

要将文本输入input，您应该使用.value，而不是.nodeValue。

var nameLength = nameInput.value.length;
var lNameLength = lastNameInput.value.length;
var addressLength = addressIput.value.length;
var phoneLength = phoneInput.value.length;

【讨论】：

我知道，但是当我写 Value 时，错误从“null”变为“Undefind”。另外，我没有通过可视代码的自动更正获得价值选项。
value 不是Value。
谢谢！我用正确的拼写将“nodeValue”更改为“value”，它可以工作。我现在得到输入值的长度！

【解决方案2】：

input 元素的值可从其value 属性获得。 nodeValue 是所有 DOM 节点的属性，与 input 元素无关。

【讨论】：

好的，我现在明白其中的区别了，但是如果我使用 nodeValue 的 Value insted，我会得到同样的错误，唯一的区别是“null”变成了“Undefind”。加上视觉代码的自动更正不建议Value的选项，只是nodeValue。我不知道为什么。
@Dolev：正如 Barmar 所说，它是 value，而不是 Value。案例很重要。关于 VS Code：显然它不知道该元素具体是一个 HTMLInputElement，因此它向您展示了 HTMLElement 上的内容（它具有 nodeValue，因为它从 Element 继承它，它从 Node 继承它)。
谢谢，我现在明白了，为什么会这样，为什么我没有得到预期的更正！