CODEWITHSUNDEEP
javascript
Johnathan James Mawdsley
Johnathan James Mawdsley

Reputation: 25

Javascript help from a student about IF statements in a function

i am trying to make an input box with a button which checks the input to see if the users input age is older than 18, the input age does not have to be exact as i just want to know how to do this

i believe i do this with an if statement to check if the input value is greater than a value i choose

can anyone help please i am lost and confused and can't work out if i can put the if statement in the function i created or create a new one

thanks in advance for having a look, hopefully i will be able to contribute back to the community later on in my course

<!DOCTYPE html>
<html>
<head>
    <title>Java Test</title>
</head>
<body>
    <h1>Enter Your Birthday to Proceed</h1>
    <input type="date" id="myDate" value="2001-01-01">
    <button onclick="MyFunction()"> Submit </button>
    <p id="demo"></p>
    <script>
    function MyFunction() {
    var x = document.getElementById("myDate").value;
    document.getElementById("demo").innerHTML = x;


    var year = parseInt(x.value.split('-')[0]);

    if (year > 1998) {

      alert("you are too young");
       }
    }
    </script>
</body>
</html>

Upvotes: 0

Views: 56

Answers (1)

ContinuousLoad
ContinuousLoad

Reputation: 4912

An if statement is one of the most fundamental components of most programming languages. In javascript, the syntax is this:

if (condition) {
  // then execute this code
}

The condition can be anything that is "truthy", that is, it can be resolved to true or false. For example, x < 20 is a true condition if the variable x stores a value less than 20; otherwise it is false.

You can read more info on if statements here.

A function can contain any number of lines of code, so in your case, simply use the if statement after you have enough information to make the condition.

You are using an HTML5 <input type="date"> element, which stores its result in its value property in the format YYYY-MM-DD. 

var myDate = document.getElementById('myDate')
console.log(myDate.value) // --> "2017-10-3"

From your question, you are interested in the year, so you need to get that part by itself and convert it into a number.

var sections = myDate.value.split('-');
// console.log(sections) --> ["2017", "10", "3"]
var yearString = sections[0]; // get the first section
// console.log(yearString) --> "2017"
var year = parseInt(yearString);
// console.log(year) --> 2017

(edit starts here)

Once you have year, you compare it to the current year to determine age.

var thisYear = new Date().getFullYear();
var age = thisYear - year;

Now you are ready to build your if

if (age > 18) {
  alert("you are old");
}

Working example:

<!DOCTYPE html>
<html>

<head>
  <title>Java Test</title>
</head>

<body>
  <h1>Enter Your Birthday to Proceed</h1>
  <input type="date" id="myDate" value="1980-01-01">
  <button onclick="MyFunction()"> Submit </button>
  <p id="demo"></p>
  <script>
    function MyFunction() {
      var x = document.getElementById("myDate").value;
      document.getElementById("demo").innerHTML = x;

      var year = parseInt(x.split('-')[0]);
      var thisYear = new Date().getFullYear();
      var age = thisYear - year;

      if (age > 18) {
        alert("you are old");
      } else if (age <= 18) {
        alert("you are too young");
      }
    }
  </script>
</body>

</html>

Hope this helps!

Upvotes: 1

Related Questions