堆棧內存溢出
  簡體   English   中英

嘿，任何人都可以幫助我完成我正在嘗試構建的這個注冊網站項目

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

 原文  2018-12-24 11:55:09  1   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