Uncaught TypeError: Cannot read properties of null (reading 'value') javascript

Question

Hi I'm trying to make a log in program that authenticates usernames only so when I try to pass user input from html to javascript it picks it up as null does anyone know why? Gives me this error message: 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>

And Login2.js(javascript is):

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);
    }
};

id={"myText"} is invalid syntax and must be id="myText". This invalid syntax results in the element not having that id, thus it cannot be found. — connexo
– connexo, Commented Mar 8, 2022 at 13:56

Ankit Saxena · Accepted Answer · 2022-03-08 13:19:08Z

4

You need to remove {} brackets from your HTML code. On the input tag replace id={"myText"} with id="myText"

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

It will fix the issue.

answered Mar 8, 2022 at 13:19

Ankit Saxena

1,1971 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

candpythonprogrammer Over a year ago

Thanks a lot. Why does it do that? if you don't mind me asking(because I'm trying to improve my knowledge in javascript)

Ankit Saxena Over a year ago

because when you use id={"myText"} on input tag, id will be set as {"myText"} not "myText". Everything inside "" will be considered as id. You can check it by inspecting it in chrome dev tools. if you use {"myText"} (in JS file )as id in getElementById, it will work fine again. eg. var myName = document.getElementById('{"myText"}').value;

bayram.cicek · Accepted Answer · 2022-12-06 09:16:03Z

0

I came across the same error while working on my project. If you are sure everything is right but still getting the error, most likely your external js file(s) trying to reach DOM elements before DOM is ready. You should use defer or async in your script tag.

It also works when adding the <script> tag at the end of the <body> (not recommended for long HTML documents, there may be a noticeable delay).

answered Dec 6, 2022 at 9:16

bayram.cicek

3435 silver badges11 bronze badges

Comments

Moritz Ringler · Accepted Answer · 2023-05-09 15:41:01Z

0

I was looking here to help fix a similar issue I was having only to find that my problem was a mismatch of single and double quotations. I don't know exactly where the issue came from but having

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

match

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

was all it took

edited May 9, 2023 at 15:41

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

answered May 2, 2023 at 23:43

Scott Faust

193 bronze badges

2 Comments

Moritz Ringler Over a year ago

I don't understand your answer, let alone how it addresses the question. Yes, the id "background" does not match the id "gameCanvas", but what does that have to do with single/double quotes?

Moritz Ringler Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read properties of null (reading 'value') javascript

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related