Jason Jason - 6 months ago 11
Javascript Question

Trouble making my Javascript work with HTML

I'm trying to learn how to use JavaScript by making a simple form, but it isn't working like I'd expect it to.

I wrote some verification functions which I thought would work, but I can't figure out why they aren't.

I can make an alert run through my Verify function, but the actual functions I've called won't run.

Here is my full code.

HTML

<!doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js"></script>
</head>


<body>

<div id="wrapper">

<div id="Header">
<div id="Link_One" class="Link">

<p> Link One </p>

</div>

<div id="Link_Two" class="Link">

<p> Link Two </p>

</div>

<div id="Link_Three" class="Link">

<p> Link Three </p>

</div>

<div id="Link_Four" class="Link">

<p> Link Four </p>

</div>

<div id="Link_Five" Class="Link">

<p> Link Five </p>

</div>
</div>

<div id="Column_Left">

<form>
<p> Name: </p>
<input type="text" name="name" id="Name_Input">
<p id="Name_Error"> Please enter a valid name. </p>
</br> </br> </br>
<p> Age: </p>
<input type="number" name="age" id="Age_Input">
<p id="Age_Error"> Please enter a valid age. </p>
</br> </br> </br>
<p> Email: </p>
<input type="text" name="email" id="Email_Input">
<p id="Email_Error"> Please enter a valid email. </p>
</br> </br>
<button type="button" id="Submit_Button" onclick="Verify()"> Submit </button>
</form>
</div>

<div id="Column_Right">

</div>

</div>

</body>

</html>


CSS

html, body {
height: 100%;
width: 100%;
}

* {
padding: 0px;
margin: 0px;
}

#wrapper {
height: 100%;
width: 80%;
max-width: 1500px;
min-width: 800 px;
background-color: black;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 20px black;
}

#Column_Left {
height: 100%;
width: 50%;
background-color: LightGreen;
float: left;
}

#Column_Right {
height: 100%;
width: 50%;
background-color: Purple;
float: right;
}

#Header {
height: 10%;
width: 100%;

}

#Link_One {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

#Link_Two {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

#Link_Three {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

#Link_Four {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

#Link_Five {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

.Link {
border: 1px solid black;
}

.Link p {
line-height: 400%;
}

#Name_Error {
display: none;
}

#Age_Error {
display: none;
}

#Email_Error {
display: none;
}


Javascript

var Age_Reg = /[0-9]/;
var Email_Reg = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
var Name_Reg = /[^A-Za-z0-9_'-]/;

function Name_Verify() {

var Name = document.getElementById("Name_Input").value;

if (Name_Reg.test(Name)) {

} else {
document.getElementById("Name_Error").style.display = inline;
}
}


function Age_Verify() {

var Age = document.getElementById("Age_Input").value;

if (Age_Reg.test(Age)) {

} else {
document.getElementById("Age_Error").style.display = inline;
}
}

function Email_Verify() {

var Email = document.getElementById("Email_Input").value;

if (Email_Reg.test(Email)) {

} else {
document.getElementById("Email_Error").style.display = inline;
}
}

function Verify() {
Name_Verify();
Age_Verify();
Email_Verify();
}

Answer

You're trying to reference inline as if it were a variable, I assume you mean to use quotes... "inline"