hey can anyone help me with this sign up website project I'm trying to build
Question
thanks in advance! following is the full html with in-page script. it's supposed to function both as register user, sign in user, and remove user from the system. when I try to press any buttons it says the functions don't exist for some reason - and it doesn't change the intended
to show a message.
there is a global array for the user object 3 inputs for the registration (username, password, verify), two for both login & remove user, each has a button that onclicks its own unique function, given the details are right it should make actions on the global array.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> --> <link rel="stylesheet" href="website_1.css"> <title>nave's website</title> </head> <body> <h1>Welcome!</h1> <form name="first"> <h2>Register</h2> <input type="text" name="regUser" placeholder="enter user"> <br> <input type="text" name="regPass" placeholder="enter password"><br> <input type="text" name="regVer" placeholder="verify password"><br> <button class="btn btn-default" type="button" onclick="reg()">Register</button><br> </form> <p id="text"></p><br> <form name="log"> <h2>Log in</h2> <input type="text" name="logUser" placeholder="enter user"><br> <input type="text" name="logPass" placeholder="enter password"><br> <button class="btn btn-default" type="button" onclick="log()">login</button><br> <p id="log"></p><br> </form> <h2>Remove</h2> <form name="rem"> <input type="text" name="remUser" placeholder="enter user"><br> <input type="text" name="remPass" placeholder="enter password"><br> <button class="btn btn-default" type="button" onclick="rem()">Remove</button><br> <p id="rem"></p><br> </form> <p id="man"></p> </body> <script> var users = [{}]; function userExist(x) { for (var i = 0; i < users.length; i++) { if (users[i].username == x) { return arr[i] } else { return false; } } } function reg() { var x = document.forms[first][regUser].value; var y = document.forms[first][regPass].value; var z = document.forms[first][regVer].value; if (y != z) { document.getElementById("text").innerHTML = "passwords dont match"; } else if (x == "" || y == "") { document.getElementById("text").innerHTML = "password & username are mandatory"; } else if (userExist(x) != false) { document.getElementById("text").innerHTML = "user already exists! try logging in"; } else { user = { username: x, password: y } users.push(user); } } function log() { var x = document.forms[log][logUser].value; var y = document.forms[log][logPass].value; var q = userExist(x); if (q != false) { if (q.password == y) { document.getElementById("log").innerHTML = "Login!"; } else { document.getElementById("log").innerHTML = "password incorrect!"; } } else { document.getElementById("log").innerHTML = "username doesn't exist!"; } } function rem() { var x = document.forms[rem][remUser].value; var y = document.forms[rem][remPass].value; var q = users.indexOf(userExist(x)); if (q == -1) { document.getElementById("rem").innerHTML = "username doesn't exist!"; } else { if (users[q].password == y) { users.splice(q, 1) document.getElementById("rem").innerHTML = "user removed successfully!"; } else { document.getElementById("rem").innerHTML = "password incorrect!"; } } } document.getElementById("man").innerHTML = "say hi"; </script> </html>2 answers
solution1
0 ACCPTED 2018-12-24 12:05:12
Your problem is that name="log" and name="rem" will result in the function rem and log to be overwritten , so at the time onclick="log()" or onclick="rem()" is evaluated, those variables point to the form elements and not to the functions anymore.
That's one reason why you should not use those on... attributes to register event listeners, you should use addEventListener instead.
As a quick fix you can either rename your functions or your html elements, so that there is no conflict between the names.
Besides that document.forms[first][regUser] would also not work, it would not access the form with the name first and then it's input with the name regUser . It would try to access the form with the name that is stored in the variable first and then the input with the name that is stored in the variable regUser .
What you are looking for is to write either document.forms['first']['regUser'] or document.forms.first.regUser
To avoid naming conflicts and pollution of the global namespace you should wrap your code into a IIFE (function() { /*your code*/ })()
(function() { 'use strict' var users = [{}]; function userExist(x) { for (var i = 0; i < users.length; i++) { if (users[i].username == x) { return arr[i] } else { return false; } } } function reg() { var x = document.forms.first.regUser.value; var y = document.forms.first.regPass.value; var z = document.forms.first.regVer.value; if (y != z) { document.getElementById("text").innerHTML = "passwords dont match"; } else if (x == "" || y == "") { document.getElementById("text").innerHTML = "password & username are mandatory"; } else if (userExist(x) != false) { document.getElementById("text").innerHTML = "user already exists! try logging in"; } else { user = { username: x, password: y } users.push(user); } } function log() { var x = document.forms.log.logUser.value; var y = document.forms.log.logPass.value; var q = userExist(x); if (q != false) { if (q.password == y) { document.getElementById("log").innerHTML = "Login!"; } else { document.getElementById("log").innerHTML = "password incorrect!"; } } else { document.getElementById("log").innerHTML = "username doesn't exist!"; } } function rem() { var x = document.forms.rem.remUser.value; var y = document.forms.rem.remPass.value; var q = users.indexOf(userExist(x)); if (q == -1) { document.getElementById("rem").innerHTML = "username doesn't exist!"; } else { if (users[q].password == y) { users.splice(q, 1) document.getElementById("rem").innerHTML = "user removed successfully!"; } else { document.getElementById("rem").innerHTML = "password incorrect!"; } } } document.getElementById('logBtn').addEventListener('click', log, false); document.getElementById('remBtn').addEventListener('click', rem, false); document.getElementById('regBtn').addEventListener('click', reg, false); document.getElementById("man").innerHTML = "say hi"; })()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> --> <link rel="stylesheet" href="website_1.css"> <title>nave's website</title> </head> <body> <h1>Welcome!</h1> <form name="first"> <h2>Register</h2> <input type="text" name="regUser" placeholder="enter user"> <br> <input type="text" name="regPass" placeholder="enter password"><br> <input type="text" name="regVer" placeholder="verify password"><br> <button id="regBtn" class="btn btn-default" type="button">Register</button><br> </form> <p id="text"></p><br> <form name="log"> <h2>Log in</h2> <input type="text" name="logUser" placeholder="enter user"><br> <input type="text" name="logPass" placeholder="enter password"><br> <button id="logBtn" class="btn btn-default" type="button">login</button><br> <p id="log"></p><br> </form> <h2>Remove</h2> <form name="rem"> <input type="text" name="remUser" placeholder="enter user"><br> <input type="text" name="remPass" placeholder="enter password"><br> <button id="remBtn" class="btn btn-default" type="button">Remove</button><br> <p id="rem"></p><br> </form> <p id="man"></p> </body> <script> </script> </html>
solution2
-1 2018-12-24 12:03:17
You added variables like rememberPass and all but your never defined them that is why you are getting those errors. I edited the snippet and all working fine. Hope it helps..!!!
Happy Coding.. :D
var users = [{}]; function userExist(x) { for (var i = 0; i < users.length; i++) { if (users[i].username == x) { return arr[i] } else { return false; } } } function reg() { var x = document.getElementsByName('regUser')[0].value; var y = document.getElementsByName('regPass')[0].value; var z = document.getElementsByName('regVer')[0].value if (y != z) { document.getElementById("text").innerHTML = "passwords dont match"; } else if (x == "" || y == "") { document.getElementById("text").innerHTML = "password & username are mandatory"; } else if (userExist(x) != false) { document.getElementById("text").innerHTML = "user already exists! try logging in"; } else { user = { username: x, password: y } users.push(user); } } function loginUser() { var x = document.getElementsByName('logUser')[0].value; var y = document.getElementsByName('logPass')[0].value; var q = userExist(x); if (q != false) { if (q.password == y) { document.getElementById("log").innerHTML = "Login!"; } else { document.getElementById("log").innerHTML = "password incorrect!"; } } else { document.getElementById("log").innerHTML = "username doesn't exist!"; } } function rememberPass() { var x = document.getElementsByName('remUser')[0].value; var y = document.getElementsByName('remPass')[0].value; var q = users.indexOf(userExist(x)); if (q == -1) { document.getElementById("rem").innerHTML = "username doesn't exist!"; } else { if (users[q].password == y) { users.splice(q, 1) document.getElementById("rem").innerHTML = "user removed successfully!"; } else { document.getElementById("rem").innerHTML = "password incorrect!"; } } } document.getElementById("man").innerHTML = "say hi";
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> --> <link rel="stylesheet" href="website_1.css"> <title>nave's website</title> </head> <body> <h1>Welcome!</h1> <form name="first"> <h2>Register</h2> <input type="text" name="regUser" placeholder="enter user"> <br> <input type="text" name="regPass" placeholder="enter password"><br> <input type="text" name="regVer" placeholder="verify password"><br> <button class="btn btn-default" type="button" onclick="reg()">Register</button><br> </form> <p id="text"></p><br> <form name="log"> <h2>Log in</h2> <input type="text" name="logUser" placeholder="enter user"><br> <input type="text" name="logPass" placeholder="enter password"><br> <button class="btn btn-default" type="button" onclick="loginUser()">login</button><br> <p id="log"></p><br> </form> <h2>Remove</h2> <form name="rem"> <input type="text" name="remUser" placeholder="enter user"><br> <input type="text" name="remPass" placeholder="enter password"><br> <button class="btn btn-default" type="button" onclick="rememberPass()">Remove</button><br> <p id="rem"></p><br> </form> <p id="man"></p> </body> </html>
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.
Related Question
Hey, can anyone help me initialize commentbox.io code in my weebly website?
Learning OOP Javascript, I'm trying really hard, but it isn't sinking in. Can anyone help me with this problem?
I'm trying this question but unable to solve this. Anyone please help me with this
i m stuck in upload image on firebase cloud firestore. Can anyone help me .?
Trying to grap the input value and display, Can anyone tell me what i'm doing wrong here?
Can anyone help me with Twitter?
Can anyone help me simplify?
I'm trying to push data on firebase database but I'm getting this error 'Cannot read property "push" ', can anyone tell me what I'm doing wrong?
I am just trying to pass some javascript value from function func() to the tag "p".But it's not happening.Can anyone help me with this?
When I create a project using Vue 2, no problems occur, but when I create project using Vue 3, I can't run the server. Can anyone help me to fix this?
Related Tags