Html Question posted in
Some basic documentation can be found here.

Html – How to manipulate calculation results into a text field

I have a weird situation. I need to run an age calculation and it if the input is a certain age, lets say 18 or older, the result should return True – if 17 or younger it should return False. I have been trying, unsuccessfully to return the results to a text field.

Also, I dont know if there is a way to run the calculation without a button. I’d rather run the calculation after inputting the date.

This is what I have tried, I know the issue is with the if/else code and I am guessing the id in the last line.

<script>
function ageCalculator() {
    var userinput = document.getElementById("BirthDate").value;
    var BirthDate = new Date(userinput);
    if(userinput==null || userinput=='') {
      document.getElementById("message").innerHTML = "Please enter your Date of Birth!";  
      return false; 
    } else {
    var month_diff = Date.now() - BirthDate.getTime();
    var age_dt = new Date(month_diff); 
    var year = age_dt.getUTCFullYear();
    var age = Math.abs(year - 1970);
    return document.getElementById("result").innerHTML =  
             + age ;

    if (age >= 55) {
        display: True;
    }  else if {
        display: false;
    }
    }
}
</script>
<div style="clear: both;">
    <h1>Please enter your Date of Birth so we can ensure the information you see is accurate.</h1>
    <div class="form-inline SectionBox">
    <input type=DateTextBox id=BirthDate emptymessage=MM/DD/YYYY required=True labeltext=Date of Birth:></div></div>
    <button type="submit" onclick = "ageCalculator()"> Next </button> <br><br>
    <input type=TextBox id=age required=false></div></div>
Tags:

2

Answers


  1. 0

    You have a number of issues. Review code below and let me know what you don’t understand

    function ageCalculator() {
  var userinput = document.getElementById("BirthDate").value;
  var BirthDate = new Date(userinput);
  if (userinput == null || userinput == '') {
    document.getElementById("message").innerHTML = "Please enter your Date of Birth!";

  } else {
    var month_diff = Date.now() - BirthDate.getTime();
    var age_dt = new Date(month_diff);
    var year = age_dt.getUTCFullYear();
    var age = Math.abs(year - 1970);
    message = document.getElementById("message")
    message.innerHTML = age;
    
    
    text = document.getElementById("age")

    if (age >= 55) {
      text.value = "TRUE";
    } else  {
      text.value = "FALSE";
    }
  }
}
    <div style="clear: both;">
  <h1>Please enter your Date of Birth so we can ensure the information you see is accurate.</h1>
  <div class="form-inline SectionBox">
    <input type=DateTextBox id=BirthDate placeholder="MM/DD/YYYY" required=True labeltext=Date of Birth:> </div>
</div>
<button type="submit" onclick="ageCalculator()"> Next </button> <br><br>
<input type=TextBox id=age required=false>
<div id='message'></div>
    Login or Signup to reply.
  2. 0

    Please update your JS code. You need to handle the age input and then update text field based on that. One more thing if you want to run the calculation without a button, you can add an event handler to the input field.

    <!DOCTYPE html>
<html>
<head>
    <title>Age Calculator</title>
</head>
<body>
    <div style="clear: both;">
        <h1>Please enter your Date of Birth so we can ensure the information you see is accurate.</h1>
        <div class="form-inline sectionBox">
            <input type="date" id="birthDate" placeholder="MM/DD/YYYY" required>
        </div>
    </div>
    <br><br>
    <input type="text" id="result" readonly>
    <br><br>

    <script>
        document.getElementById('birthDate').addEventListener('change', ageCalculator);

        function ageCalculator() {
            var userInput = document.getElementById("birthDate").value;
            var birthDate = new Date(userInput);
            if(userInput == null || userInput == '') {
                document.getElementById("result").value = "Please enter your Date of Birth!";
                return false;
            } else {
                var monthDiff = Date.now() - birthDate.getTime();
                var ageDt = new Date(monthDiff); 
                var year = ageDt.getUTCFullYear();
                var age = Math.abs(year - 1970);
                
                if (age >= 18) 
                    document.getElementById("result").value = "True";
                 else 
                   document.getElementById("result").value = "False";
                
            }
        }
    </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search