堆栈内存溢出
  繁体   English   中英

嘿，任何人都可以帮助我完成我正在尝试构建的这个注册网站项目

[英]hey can anyone help me with this sign up website project I'm trying to build

 原文  2018-12-24 11:55:09  5   2    javascript/ html

问题描述

提前致谢！ 以下是带有页内脚本的完整 html。 它应该同时用作注册用户、登录用户和从系统中删除用户。 当我尝试按下任何按钮时，它说由于某种原因这些功能不存在 - 它不会改变预期

显示一条消息。

有一个用于用户对象的全局数组 3 个用于注册的输入（用户名、密码、验证），两个用于登录和删除用户，每个都有一个按钮，可以点击自己独特的功能，如果细节正确，它应该采取行动在全局数组上。 

 <!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 个解决方案

解决方案1
 0 已采纳  2018-12-24 12:05:12

您的问题是name="log"和name="rem"将导致函数rem和log被覆盖，因此在评估onclick="log()"或onclick="rem()" ，那些变量指向form元素而不是函数。

这就是为什么你不应该使用那些on...属性来注册事件侦听器的原因之一，你应该使用addEventListener代替。

作为快速修复，您可以重命名函数或 html 元素，以免名称之间发生冲突。

除此之外document.forms[first][regUser]也将无法正常工作，它不会访问form与名称first ，然后将其输入的名称regUser 。 它会尝试与存储在变量名来访问的形式first ，然后与存储在变量名输入regUser 。

您正在寻找的是编写document.forms['first']['regUser']或document.forms.first.regUser

为了避免命名冲突和全局命名空间的污染，您应该将代码包装到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>

解决方案2
 -1  2018-12-24 12:03:17

您添加了诸如rememberPass变量，但您从未定义过它们，这就是您收到这些错误的原因。 我编辑了片段并且一切正常。 希望能帮助到你..！！！

快乐编码.. :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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 嘿，谁能帮我在我的网站上初始化 commentbox.io 代码？ 学习 OOP Javascript，我真的很努力，但它并没有陷入困境。谁能帮我解决这个问题？ 我正在尝试这个问题，但无法解决这个问题。 任何人请帮我解决这个问题 我卡在 firebase 云火库上的上传图像中。 谁能帮我。？ 试图抓住输入值并显示，谁能告诉我我在这里做错了什么？ 任何人都可以通过Twitter帮助我吗？ 有人可以帮我简化吗？ 我正在尝试在 firebase 数据库上推送数据，但我收到此错误“无法读取属性“推送””，谁能告诉我我做错了什么？ 我只是想将函数 func() 中的一些 javascript 值传递给标签“p”。但它没有发生。谁能帮我解决这个问题？ 当我使用Vue 2创建项目时，没有出现任何问题，但是当我使用Vue 3创建项目时，我无法运行服务器。 谁能帮我解决这个问题？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM