Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Oppgave 1-3</title>
            <meta charset="UTF-8"  />
            <link href="reg.css" rel="stylesheet" type="text/css"   />
                <script>

                window.onload = main;
                var okPass = false;
                var okNavn = false;

                function main() {
                    document.getElementById("reg").onclick = registration;
                }

                function registration() {
                    if(okPass && okNavn) {
                        document.getElementById("utskrift").innerHTML = "Welcome to the club!"
                    }
                }
                function checkUse() {
                    var user = document.getElementById("user");
                    var message = document.getElementById("error-use");
                    var goodColor = "#66cc66";
                    var badColor = "#ff6666";

                        if(user.value == "") {
                            user.style.backgroundColor = badColor;
                            message.style.color = badColor;
                            message.innerHTML = "need username"
                        }
                        else {
                            user.style.backgroundColor = goodColor;
                            message.style.color = goodColor;
                            message.innerHTML = "ok!"
                        }
                }

                function checkPass() {

                    var pass1 = document.getElementById("pass1");
                    var pass2 = document.getElementById("pass2");
                    var message = document.getElementById("error-nwl");
                    var goodColor = "#66cc66";
                    var badColor = "#ff6666";

                        if(pass1.value.length > 5) {
                            pass1.style.backgroundColor = goodColor;
                            message.style.color = goodColor;
                            message.innerHTML = "character number ok!"
                            okPass = true;
                        }
                        else {
                            pass1.style.backgroundColor = badColor;
                            message.style.color = badColor;
                            message.innerHTML = " you have to enter at least 6 digit!"
                            okPass = false;
                            return;
                        }

                        if(pass1.value == pass2.value) {
                            pass2.style.backgroundColor = goodColor;
                            message.style.color = goodColor;
                            message.innerHTML = "ok!"
                        }
                        else {
                            pass2.style.backgroundColor = badColor;
                            message.style.color = badColor;
                            message.innerHTML = " These passwords don't match"
                        }
                }


                </script>
    </head>
    <body>

        <h2>Registration</h2>

        <input name="username"  type="username" placeholder="username" id="user" onkeyup="checkUse(); return false;"/>  <output id="error-use"></output>    <br/>

        <input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass(); return false;" />   <br/>

        <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <output id="error-nwl"></output>     <br/>

        <button id="reg" type="button">Register</button>    <br/>

        <output id="utskrift"></output>


    </body>
</html>