CODEWITHSUNDEEP
javascripthtml
candpythonprogrammer
candpythonprogrammer

Reputation: 95

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

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

Upvotes: 3

Views: 23833

Answers (3)

Scott Faust
Scott Faust

Reputation: 19

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

Upvotes: 0

bayram.cicek
bayram.cicek

Reputation: 333

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).

Upvotes: 0

Ankit Saxena
Ankit Saxena

Reputation: 1197

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.

Upvotes: 4

Related Questions