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>

t.niese · Accepted Answer · 2018-12-24T12:53:46.513

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>

score -1 · Answer 2 · answered Dec 24 '18 at 12:03

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 reason for the error is that there is a naming conflict between the form elements and the functions which results, in `rem` and `log` pointing to the the forms instead of the functions at the time that `onclick` is evaluated, and that the OP forgot the quotation marks for the named access to the form elements. — t.niese, Dec 24 '18 at 12:17

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

2 Answers2