Why i'm getting the option to use nodeValue insted of just Value?

Question

i'm writing an html page that gets a name, an address and a phone number to practice validation. when the javascript function tries to get the length of the value in the inputs i get this error: "Uncaught TypeError: Cannot read property 'length' of null"

i dont know what nodeValue means but i simply want to get the value in the input.

this is the part of the code in the javascript that gives me the error:

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;

what do i need to change to just get the value in the inputs and measure them?

here is my html code:

<!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>

If you have `` elements inside your ``s, you need to get the input elements, and then use `.value` to get the text that was entered into it. — Barmar, Apr 29 '17 at 13:09
@Barmar i am getting the input elements. you can see them in the parantsis right after the function name in the javascript page. but also i have them in seperate var's with 'getElementById' so i got that coverd — Dolev, Apr 29 '17 at 13:12
I wouldn't rely on the automatic globals if I were you, but it's your call. They *are* in the spec now. But there are so many globals, it's easy to use an `id` that doesn't end up creating the automatic global because of a conflict with another global (for instance: `name`). — T.J. Crowder, Apr 29 '17 at 13:17
@T.J.Crowder ok i accept what you're saying. i changed all the 'nodeValue' to 'Value' but now i get the same error with just the 'null' turned into 'Undefind'. — Dolev, Apr 29 '17 at 13:22

score 2 · Answer 1 · answered Apr 29 '17 at 13:14

2

To get the text entered into an input, you should use .value, not .nodeValue.

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

answered Apr 29 '17 at 13:14

Barmar

741,623
53
500
612

1

I know, but when i write Value the error change from 'null' to 'Undefind'. Plus i dont get the option of Value with the autoCorrect of visual code. – Dolev Apr 29 '17 at 13:16
1

`value` not `Value`. – Barmar Apr 29 '17 at 13:16
Thank you! i change the 'nodeValue' to 'value' with the correct spelling and it works. i get the length of the inputs value now! – Dolev Apr 29 '17 at 13:25

score 0 · Answer 2 · answered Apr 29 '17 at 13:14

0

The value of an input element is available from its value property. nodeValue is a property of all DOM nodes, and not relevant to input elements.

answered Apr 29 '17 at 13:14

T.J. Crowder

1,031,962
187
1,923
1,875

Ok i understand the difference now, but if i use Value insted of nodeValue i get the same error with the only difference is the 'null' turns to 'Undefind'. plus the autocorrect of visual code dont suggest the option of Value, just nodeValue. i dont know why. – Dolev Apr 29 '17 at 13:19
1

@Dolev: As Barmar said, it's `value`, not `Value`. Case is important. About VS Code: Apparently it doesn't know the element is specifically an `HTMLInputElement`, so it's showing you what's on `HTMLElement` (which has `nodeValue` because it inherits it from `Element`, which inherits it from `Node`). – T.J. Crowder Apr 29 '17 at 13:26
thank you, i understand it now, why it's acts like that i why i didnt get the correction i expected! – Dolev Apr 29 '17 at 13:30

Why i'm getting the option to use nodeValue insted of just Value?

2 Answers2