Altjen B. Altjen B. - 25 days ago 8
Javascript Question

JavaScript if function is not working

I am trying to make a "simple" login system by identifying the value the user should enter. here is the code in javascript:

function CheckDB(){

if (document.getElementById('TextButton1').value == "a".toString() && document.getElementById('TextButton2').value == "a".toString()) {
alert("Works!");
} else {
ChangeTB1Color();
}
}


Am I doing something wrong at the if function?

PS: code of the button which calls this function

<a id="Button1" onclick="CheckDB()">Sign In</a>


As many of you requested, this is the full code. in ASP.net and Javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Dope.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DOPE | Log In</title>
<link href="assets/CSS/LoginStylesheet.css" rel="stylesheet" />
<link href="assets/fontawesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/fontawesome/css/font-awesome.min.css" rel="stylesheet" />

<script type = "text/javascript">

//PhotoSlideShowStart
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}

function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}

function startTimer() {
setInterval(displayNextImage, 4000);
}

document.addEventListener("DOMContentLoaded", function (event) {
startTimer();
});

var images = [], x = -1;
images[0] = "assets/Images/Image1.jpg";
images[1] = "assets/Images/Image2.jpg";
images[2] = "assets/Images/Image3.jpg";
images[3] = "assets/Images/Image4.jpg";

//PhotoSlideShowEnd

//ColorAnimationsStart
function ChangeTB1Color() {

document.getElementById('TextButon1').className = "TB1-2";
document.getElementById('TBG').className = "TopBackgroundRed";
document.getElementById('TextButon2').className = "TB2-2";
document.getElementById('BBG').className = "BottomBackgroundRed";
document.getElementById('Info').className = "InfoRed";


}

function GetColorBack() {
document.getElementById('TextButon1').className = "TB1-1";
document.getElementById('TBG').className = "TopBackground";
document.getElementById('Info').className = "InfoHiden";
}

function GETColor() {
document.getElementById('TextButon2').className = "TB2-1";
document.getElementById('BBG').className = "BottomBackground";
document.getElementById('Info').className = "InfoHiden";
}

//ColorAnimationsEnd

//LoginFunctionsStart

function CheckDB(){

if (document.getElementById('TextButton1').innerText == "a" && document.getElementById('TextButton2').innerText == "a") {
alert("Works!");
} else {
ChangeTB1Color();
}
}
//LoginFunctionsEnd

</script>

</head>
<body>
<form id="form1" runat="server">
<div id="CenterContents" onload = "changeImage()">
<%-- write everything here --%>
<%-- backgroundimage --%>
<img id="img" src="assets/Images/Image3.jpg">

<div id="Shadows">

</div>

<div id="CenterPanel">
<div id="wot">

<div id="TBG" class="TopBackground" runat="server">
<asp:TextBox ID="TextButon1" CssClass="TB1-1" onfocus="GetColorBack()" placeholder="Email" runat="server"></asp:TextBox> <i class="fa fa-envelope" id="envelope" aria-hidden="true" ></i>
</div>


<div id="BBG" class="BottomBackground" runat="server" >
<asp:TextBox ID="TextButon2" CssClass="TB2-1" onfocus="GETColor()" placeholder="Password" TextMode="Password" runat="server"></asp:TextBox> <i class="fa fa-lock" id="locker" aria-hidden="true" ></i>
</div>
</div>

<a id="Button1" onclick="CheckDB()">Sign In</a>


<div id="Info" class="InfoHiden" runat="server">
<i id="InfIcon" class="fa fa-info fa-4x" aria-hidden="true"></i>

<div id="TextPanel" runat="server">
Please enter correct Email
and Password to
proceed
</div>
</div>

</div>


<%-- dont write anything lower than this --%>
</div>


</form>
</body>
</html>

bub bub
Answer

You are missing one t !

TextButon1 should be changed to TextButton1 and also the same with TextButon2