I was trying to use innerHTML to change the div element with id content but it just blinks welcome on login and then disappears.I know its silly but can't understand why I'm getting this error. The code is as follows:
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" href="signup.css">
</head>
<body>
<div id="content" style = "float: left;"></div>
<div class = "login">
<div class = "icon">
<img src="people.png" style ="width:50%; margin: 5% 25% 25% 25%;">
<form>
</br>
<label>User name:</label>
<input type = "text" id = "username" placeholder = "Enter username">
</br></br></br></br>
<label>Password:</label>
<input type = "password" id = "password" placeholder = "Enter Password">
</br></br></br></br>
<input type = "submit" onclick ="return validate()" value ="Login">
</form>
</div>
</div>
</body>
<script type = "text/javascript">
function validate(){
if(document.getElementById("username").value=="Tushar"&&document.getElementById("password").value=="tushar"){
alert("Hello");
document.getElementById("content").innerHTML = '<h1 id = "welcome" style="font-size: 25px;color:#ffffff; ">Welcome</h1>';
}
else{
alert("Invalid username/password");
}
}
</script>
But the welcome does not display
Instead of what Tyeth suggest, consider using
event.preventDefault();
To prevent the page from reloading. Something like this,
function validate() {
event.preventDefault();
// Further code down.
This will prevent the default action from being executed, and would show the content in your page that you have just added. Because, not every function has to return false;
, and it might also break the logic if you are using linters or other tools such as TypeScript — it would assume as though you want to return a bool value and would indicate as such.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault