What is the issue with the code below?


#1

In the code below, there is some issue with the javascript part. The code does perform any function when clicked on the login button. Also, there is no error shown too. Can anyone please tell me what is the issue with this code?

<!DOCTYPE html>
<html>
<head>
	<title>Login</title>
	<style type="text/css">
		body{
			text-align: center;
			background-color: white;
		}
		#user, #pass{
			margin-top: 25px;
			padding-top: 2px;
			padding-bottom: 2px;	
			font-size: 28px;
			color: black;
			font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			margin-left: 20px;
			margin-right: 20px; 
		}
		#pass{
			margin-top: 25px;
			margin-bottom: 30px;
		}
		#button{
			margin-top: 20px;
			height: 50px;
			width: 100px;
			cursor: pointer;
			background-color: white;
			border-color: black;
			color: black;
			font-size: 24px;
			border-width: 1px;
			border-radius: 10px;
			margin-bottom: 20px;
			margin-left: 50px;
			
		}
		input{
			height: 32px;
			border-style: solid;
			border-width: 1px;
			border-color: black;
			background-color: white;
			margin-left: 10px;
			border-radius: 10px;
			font-size: 22px;
			text-align: center;
			width: 200px;
			}
		#inp2{
			margin-left: 12px;
		}
		table, tr, td{
			border-style: solid;
			border-color: black;
			border-collapse: collapse;
			border-radius: 5px;
			border-width: 1px;
		}
		#submit{
			color: black;
			font-size: 18px;
			font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		}
		#radio{
			vertical-align: middle;
			border-style: solid;
			background-color: white;
			width: 15px;
			height: 15px;
			border-width: 1px;
		}

	</style>
</head>
<body>
	<form name='loginForm'>
		<div id='Login'>
			<TABLE>
				<tr>
					<td>
						<div id='message'>
							
						</div>
						<div id='user'>
							Username: <input id='inp1' type="text" maxlength="10" name="username" value="" autocomplete="">
						</div>
						<div id='pass'>
							Password: <input id='inp2' type="password" name="password" value="" autocomplete="">
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div id='submit'>
							<input id='radio' type="radio" name="radio" autocomplete="">
							Keep me logged in
							<button id='button' type="button">Login</button>
						</div>
					</td>
				</tr>
			</TABLE>
		</div>
	</form>

	<script type="text/javascript">
		
		let button = document.getElementById('button');
		let username = document.getElementById('inp1').value.toLowerCase();
		let password = document.getElementById('inp2').value;
		let message = document.getElementById('message').innerHTML;
		
		let users = ['apoorv', 'rahul', 'arjun'];
		let passes = ['a sIngal', 'rahul', 'arjun'];
		
		let user = '';
		let pass = '';
				
		checkUser = () => {

			for (let i = 0; i < users.length; i++) {
				if(users[i] = username){
					user = i;
					break;
				}
			}
		}
		checkPass = () => {

			for (let j = 0; j < passes.length; j++) {
				if(pass[j] = password){
					break;
					pass = j;
				}
			}
		}

		button.onclick = () => {
			checkUser();
			checkPass();
			
			if (user === pass){
				return message = 'You have sucessfully logged in.';
			}
			else {
				return messgae = 'Please fill correct credentials.'
			}
		}
	</script>
</body>
</html>

#2

You’re returning the message, but you do noting with it. if you want to log it to the console do this instead:

console.log('You have sucessfully logged in.');

#3

There is a division with id message where I want the message to appear-

<div id='message'>
</div>

I have defined message as -

let message = document.getElementById('message').innerHTML;

So the message that you have successfully logged in should appear in the above div.


#4

Seems like you can’t call .innerHTML there.
Try is here:

if (user === pass){
    message.innerHTML = 'You have sucessfully logged in.';
}

#5

Thanks bro, it worked.