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


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ankit Saxena

Related Questions