嘿，有人可以帮我这个我试图建立的注册网站项目吗

时间：2018-12-24 11:55:10

标签： 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 个答案:

答案 0 :(得分：1)

您的问题是name="log"和name="rem"将导致函数rem和log被覆盖，因此在{对{1}}或onclick="log()"进行求值，这些变量指向onclick="rem()"元素，而不再指向函数。

这就是为什么您不应该使用那些form属性来注册事件侦听器，而应该使用addEventListener的原因。

作为一种快速解决方案，您可以重命名函数或html元素，以使名称之间没有冲突。

除了on...也不起作用之外，它不会访问名称为document.forms[first][regUser]的{​​{1}}，然后输入名称为form的输入。它将尝试使用存储在变量first中的名称访问表单，然后使用存储在变量regUser中的名称访问输入。

您要寻找的是写first或regUser

为避免命名冲突和对全局名称空间的污染，应将代码包装到IIFE document.forms['first']['regUser']

中 

document.forms.first.regUser
(function() { /*your code*/ })()

答案 1 :(得分：-1)

您添加了诸如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>

相关问题
最新问题