External JS is added with <script src="..."></script> and not with a <link> element.
If you have run your code through a validator, it would have highlighted your error.
Solution 1 :
Solution 2 :
Hey Try this code,
<html>
<head>
<title>Login Screen</title>
<link rel="javascript" type="text/javascript" href="login.js">
</head>
<body>
<div id="container">
<h1 onclick="loginDetails()">Login</h1>
<form>
<label for="username" class="label-1">Username</label><br>
<input type="text" id="username" class="text-box"><br>
<label for="password" class="label-2">Password</label><br>
<input type="text" id="password" class="text-box"><br>
<button type="submit" id="login" class="button">Sign In</button>
</form>
</div>
<script>
function loginDetails(){
alert('You Clicked on H1!')
}
</script>
</body>
Output :
Solution 3 :
Actually, your code works (current code snippet).
A better way would be by removing “onclick” attribute and creating event listener.
const h1 = document.querySelector('h1');
h1.addEventListener('click', loginDetails);
Problem :
For some reason, my JavaScript function is not working. I want to use onclick on an h1 tag. On the snippet below, it works just fine. But when I try it on Chrome, it doesn’t do anything. Any help is appreciated.
function loginDetails() {
alert("Username: somebodynPassword: pass123");
}<!DOCTYPE html>
<html>
<head>
<title>Login Screen</title>
<link rel="javascript" type="text/javascript" href="login.js">
</head>
<body>
<div id="container">
<h1 onclick="loginDetails()">Login</h1>
<form>
<label for="username" class="label-1">Username</label><br>
<input type="text" id="username" class="text-box"><br>
<label for="password" class="label-2">Password</label><br>
<input type="text" id="password" class="text-box"><br>
<button type="submit" id="login" class="button">Sign In</button>
</form>
</div>
</body>
</html>Comments
Comment posted by bjelleklang
Do you see anything in the developer console?
Comment posted by skyline3000
You put the click handler on the H1 tag, click the word “Login” above in your example and it works…
Comment posted by Quentin
@skyline3000 — They already said that (including the fact it works in the live demo here) in the question.
Comment posted by Otaku
@bjelleklang Uncaught ReferenceError: loginDetails is not defined at HTMLHeadingElement.onclick
Comment posted by Quentin
This reads more like a game of spot-the-difference than an answer (and fails to remove the code which caused the problem in the first place).
Comment posted by Kirtan
i put all code in once because i think thats easy to copy and check for you. if this example is not working in your system then XD there is issue in your system.
Comment posted by Quentin
“Actually, your code works (current code snippet).” — No, it doesn’t. Please note that the question explicitly says: “On the snippet below, it works just fine. But when I try it on Chrome, it doesn’t do anything.”.
Comment posted by Quentin
Answers are supposed to answer the question, not