Error while calling a Js function

I was making a login page using basic html, css and Js(I am still a beginner). What the error was I made a html button element

Which calls a login() function In Js file but when I run the webpage and click on the login button it’s says login isn’t defined. I asked ai about that but still it says the same error. I refreshed the reply but it’s still the same.
I don’t know how to fix it. Anyone help??
Here’s the error I got:

ReferenceError: login is not definedhttps://76edabe7-a225-4b74-8295-6cb4f1be20bc-00-26grc59i299k9.sisko.replit.dev/:1

.

Hey, @KshitizAryal1 welcome to the forums!

Can you please provide a link to the repl? This way it is easier for staff and members of the community to help you!

Also see this guide on how to share your code:

Here is the link to the repl: https://replit.com/@KshitizAryal1/Login-page

On line 8 you have:

<script src="srcipt.js"></script>

Your file is actually named script.js so you’ll need to fix the typo:

<script src="script.js"></script>

I’m pretty confused by what’s going on in script.js:

function login() {
	let username, password, pwdlen, error;
	window.onload = function() {
		username = document.getElementByID('username').value;
		password = document.getElementByID('password').value;
		pwdlen = password.value.length;
		if (pwdlen < 8) {
			error = "Password should be at least 8 letters";
		}
	};
	document.getElementByID('btn').className = "btn2";
	settimeout(function() {
		document.getElementByID('btn').className = "btn1";
	}, 3000);
	if (pwdlen < 8) {
		document.getElementByID('inf').innerHTML = error;
	} else {
		return;
	}
}

If you add a load event listener to window inside of login, the callback should never be called given load would have already happened. You may have intended your code to be like this:

let username, password, pwdlen, error;
window.onload = function() {
	username = document.getElementById('username').value;
	password = document.getElementById('password').value;
	pwdlen = password.value.length;
	if (pwdlen < 8) {
		error = "Password should be at least 8 letters";
	}
};
function login() {
	document.getElementById('btn').className = "btn2";
	settimeout(function() {
		document.getElementById('btn').className = "btn1";
	}, 3000);
	if (pwdlen < 8) {
		document.getElementById('inf').innerHTML = error;
	} else {
		return;
	}
}

(Also note the ‘d’ in getElementById is lowercase.)

There’s another problem with this:

let username, password, pwdlen, error;
window.onload = function() {
	username = document.getElementById('username').value;
	password = document.getElementById('password').value;
	pwdlen = password.value.length;
	if (pwdlen < 8) {
		error = "Password should be at least 8 letters";
	}
};

onload would only ever be called once, and the value property of DOM elements only returns a number (not a reference, so this number is never updated if the user types something new).

Here’s how I might write the same code:

// const = cannot be reassigned
const error = "Password should be at least 8 letters";

// variables for DOM elements (because calling `getElementById` each time is slow and inefficient)
let username, password, btn, inf;
// this variable isn't really neccessary, but you might want it just for readability
let pwdlen;

// adding event listeners properly is always better practice
window.addEventListener("load", function() {
	// just storing the reference to the DOM element (so their values can be accessed any time without the cost of finding the DOM element first)
	username = document.getElementById('username');
	password = document.getElementById('password');
	btn = document.getElementById('btn');
	inf = document.getElementById('inf');
});

function login() {
	pwdlen = password.value.length;
	if (pwdlen < 8) {
		// if you want to change text, _always_ use `textContent`, the other two, inner and outer HTML are unsafe and if you actually need to use them, you're doing something wrong
		inf.textContent = error;
	}
	// just print the username and password to see it's all working
	console.log("Username:", username.value);
	console.log("Password:", password.value);
}
2 Likes