Can't figure out what is wrong with my JavaScript code

Question

This is the HTML code:

<form action="">
            <div data-role="fieldcontain">
                <label for="username">
                    Username
                </label>
                <input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required>
            </div>
            <div data-role="fieldcontain">
                <label for="password">
                    Password
                </label>
                <input class="validate" name="password" id="password" placeholder="" value="" type="password" maxlength="20" required>
            </div>
            <input id="submitLogin" type="submit" value="Log In" data-transition="slide">
            <div id="errormsg"></div>
        </form>

And this is the JavaScript code. I'm trying to hard code the page to login when the username and password is "abc".

    username_test = document.getElementById("username").getAttribute("value") === "abc";
    password_test = document.getElementById("password").getAttribute("value") === "abc";
    if_true = window.location.href("Main_Menu.html");
    if_false = document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>");
    function login() {
        if (username_test && password_test)
            {
            if_true
            }
        else
            {
            if_false
            }
    }

Answer 1

Try this:

username_test = document.getElementById("username").getAttribute("value") === "abc";
password_test = document.getElementById("password").getAttribute("value") === "abc";
function login() {
    if (username_test && password_test)
        {
          window.location.href = "Main_Menu.html";
        }
    else
        {
          document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>");
        }
}

OR

username_test = document.getElementById("username").getAttribute("value") === "abc";
password_test = document.getElementById("password").getAttribute("value") === "abc";
if_true = function() { window.location.href = "Main_Menu.html"; };
if_false = function () { document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>"); };
function login() {
    if (username_test && password_test)
        {
            if_true();
        }
    else
        {
            if_false();
        }
}

Answer 2

There are two errors in your code.

First :

if_true = window.location.href("Main_Menu.html");

window.location.href is not a function . Put it inside the if statement because it is executed immediately. You can't store it in some variable. I mean you can, but it will still be executed in the very line you call it.

Second :

if_false = document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>");

innerHTML is also not a function . It's a property of #errormsg element. And you can't just bind the function result to a variable and output it somwhere else expecting that it will be called there.

Your code should look like this:

username_test = document.getElementById("username").getAttribute("value") === "abc";
password_test = document.getElementById("password").getAttribute("value") === "abc";

function login() {
    if (username_test && password_test)
    {
        window.location.href = "Main_Menu.html";
    }
    else
    {
        document.getElementById("errormsg").innerHTML = "<p style="color=red;">Invalid credentials.</p>";
    }
}

Answer 3

I see many problem with your code here

• You've made a form with empty action, and a submit button. This button will submit to empty action, thus reloading the page without doing anything.
• You're reading username and password in the beginning of the page, before even writing anything down, thus it'll always result false.
• The function login is not assigned to any button actions.

You can do this -

<form action="">
            <div data-role="fieldcontain">
                <label for="username">
                    Username
                </label>
                <input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required>
            </div>
            <div data-role="fieldcontain">
                <label for="password">
                    Password
                </label>
                <input class="validate" name="password" id="password" placeholder="" value="" type="password" maxlength="20" required>
            </div>
            <input id="submitLogin" onclick="login()" value="Log In" data-transition="slide">
            <div id="errormsg"></div>
        </form>

JS:

function login() {
    username_test = document.getElementById("username").getAttribute("value") === "abc";
    password_test = document.getElementById("password").getAttribute("value") === "abc";
    if (username_test && password_test)
        {
          window.location.href = "Main_Menu.html";
        }
    else
        {
          document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>");
        }
}

Answer 4

try this:

<form action="">
<div data-role="fieldcontain">
<label for="username">
 Username
 </label>
<input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required>
</div>
<div data-role="fieldcontain">
<label for="password">
 Password
 </label>
<input class="validate" name="password" id="password" placeholder="" value=""type="password" maxlength="20" required>
</div>
 <input id="submitLogin" type="submit" value="Log In" data-transition="slide" onclick="nextpage()">
 <div id="errormsg"></div>
 </form>

This is script code:

function nextpage()
{
username_test = document.getElementById("username").value 
password_test = document.getElementById("password").value 
 if((username_test=="abc")&&(password_test=="abc"))
 window.location.href("Main_Menu.html");
  else
document.getElementById("errormsg").innerHTML="Invalid credentials.";
}