CODEWITHSUNDEEP
javascripthtml
dolphziggler
dolphziggler

Reputation: 21

Simple Age Verification in javascript

I'm a total Js noob and i'm trying to make a simple script to take values from two input tags and based on their value change a p tag. I'm probably just not using proper syntax but I can't find an answer online to how to do this.

The script is supposed to be like age verification for an r-rated movie. The first input is age and the second is whether or not the customer has an adult with them for if they are underage.

<pre>
<!DOCTYPE html>
<html>
    <input type="text" id="age" value="your age">
    <input type="text" id="adult" value="(y or n)">
    <input type="button" onclick="checkAge()" value="submit">
<p id="answer"></p>
<script>
var age = document.getElementById("age").innerHTML;
var adult = document.getElementById("adult").innerHTML;
var result = document.getElementById("answer").innerHTML;
var oldEnough = false;
function checkAge(){
    if(age.value >= 18){
        oldEnough = true;
    }
    else{
        oldEnough = false;
    }
    if(oldEnough == false){
        if(adult.value == "y"){
            result = "You are not old enough, but have an adult with you.";
        }
        else{
            result = "You are not old enough and are unaccompanied."
        }
    }
    else{
        result = "You are old enough."
    }
}
</script>
</html>
</pre>

Upvotes: 2

Views: 9567

Answers (2)

RobG
RobG

Reputation: 147363

The input elements can be more easily accessed if they are put in a form, and the logic can be simpler. Also, make sure you use appropriate elements and attributes, e.g. don't use value as a kind of placeholder, it should be a suitable default value (if there is one).

And don't use placeholders instead of labels, they should only be used as a hint for the kind of content required, they don't replace labels.

function checkAge(button) {
  var form = button.form;
  var result = document.getElementById("answer");

  result.innerHTML = form.age.value >= 18? 'You are old enough.' :
                     form.adult.checked? 'You are not old enough, but have an adult with you.' :
                     'You are not old enough and are unaccompanied.';
}
<form>  
  <label>Age: <input type="text" name="age"></label>
  <label>Adult: <input type="checkbox" name="adult"></label>
  <input type="button" onclick="checkAge(this)" value="Check age">
  <p id="answer"></p>
</form>

Upvotes: 0

Barmar
Barmar

Reputation: 780851

  1. Don't call .innerHTML on the input elements. Just set the variables to point to the elements.

  2. When assigning the result, you need to use result.innerHTML at the time of the assignment. Assigning .innerHTML to the variable just copies the current contents of the element as a string, it doesn't make result a reference to the innerHTML property.

  3. You should call parseInt on age, because .value is a string.

function checkAge() {
  var age = document.getElementById("age");
  var adult = document.getElementById("adult");
  var oldEnough = false;
  var result = document.getElementById("answer")
  if (parseInt(age.value, 10) >= 18) {
    oldEnough = true;
  } else {
    oldEnough = false;
  }
  if (oldEnough == false) {
    if (adult.value == "y") {
      result.innerHTML = "You are not old enough, but have an adult with you.";
    } else {
      result.innerHTML = "You are not old enough and are unaccompanied."
    }
  } else {
    result.innerHTML = "You are old enough."
  }
}
<input type="text" id="age" placeholder="your age">
<input type="text" id="adult" placeholder="(y or n)">
<input type="button" onclick="checkAge()" value="submit">
<p id="answer"></p>

Upvotes: 2

Related Questions