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