Button onclick event in Javascript does not trigger alerts
Question
I'm trying to make a simple register/login system but when I press the button for both, it doesn't do what I need it to do.
I put
alert("I work!");
at the beginning of each function supposed to work to see if it actually gets triggered but it doesn't. I also checked if the onclick events for both are referenced correctly and they are. I even tried to copy the actual scripts into the html file to ensure that it's not a reference issue. At this point, I'm really stuck, and if this is some syntax error, it doesn't alert me and I'm not aware of any.
The codes are:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Opportunities</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
</head>
<body>
<p>Uwu</p>
<form>
<p>Username <input type="text" class="username" /></p>
<p>Password <input type="password" class="password" /></p>
<button onclick="loginUser()">Login</button>
</form>
<p>Not yet registered? <a href="/register">Click here to create an account.</a> </p>
</body>
</html>
registration.html:
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src=/js/script.js"></script>
</head>
<body>
<p>Registration page</p>
<form>
<p>Username <input type="text" class="username" /></p>
<p>Password <input type="password" class="password" /></p>
<button onclick="registerUser()">Register</button>
<!--onclick event doesn't work-->
</form>
<p><a href="/">Click here to go back.</a></p>
</body>
</html>
and script.js:
var url = "http://localhost:8888";
function test(){
console.log('hello');
}
function registerUser(){
alert("I work!");
var username = document.getElementbyClassName("username");
var password = document.getElementbyClassName("password");
$.ajax{(
url: url + "/register",
method: "post",
data: {
username: username[0].value,
password: password[0].value
}
success: function(respons){
alert(response.message);
}
}).error(function(response){
alert(response.message);
});
}
function loginUser(){
alert("I work!");
var username = document.getElementbyClassName("username");
var password = document.getElementbyClassName("password");
$.ajax({
url: url + "/login",
method: "post",
data: {
username: username[0].value,
password: password[0].value
}
}).success(function(response){
alert(response.message);
}).error(function(response){
alert(response.message);
});
}
Whenever I press the buttons for each, it just clears the texts in my inputs but doesn't launch an alert like I intend to. Please do tell me what I should check regarding this. Thank you.
3 answers
solution1
0 2019-01-19 15:22:39
I think your script is not loaded
Remove the frist backslash ('/') from
<script type="text/javascript" src=/js/script.js"></script>
solution2
0 2019-01-20 11:30:55
If you are using your browser I would try first that you dont have any "popup" script blocking extensions, I had the same issue and the issue was chrome popup js blocker cause simple adblocker doesnt work for some sites.
cheers
solution3
0 2019-01-20 11:56:56
Looks like a typo in the registerUser() function try changing the ajax call to
$.ajax({
url: url + "/register",
method: "post",
data: {
username: username[0].value,
password: password[0].value
},
success: function(respons){
alert(response.message);
}
}).error(function(response){
alert(response.message);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.