using javascript for putting range

Question

I want to create an age calculator where the user enters a year and the year is subtracted from 2018 and a message displays "Your age in 2018 is..". So if the user enters the year 2000, then the alert message should display Your age in 2018 is 18 years old.However the year inserted should be between 1970 and 2017. This i am unable to do. In addition, i am unable to display the "years old" after the age.How to solve these 2 problems. These are the codes i've tried.

  <html>
<head>
<script type="text/javascript">
function age(){
let x = document.getElementById('txtYear').value;
if(x.length == 0) {
alert("Numbers should be between 1970 and 2018");
return;
}

if(isNaN(x)){
alert("Value entered is not numeric");
return;
}

var age = 2018-parseInt(x);
document.getElementById('age').innerText="Your age in 2018 is "+age;
}
</script>
</head>
Enter Year of Birth: <input type="text" id="txtYear" />
 <button onClick="age(txtYear.value)">Calculate Age</button>
 <br><br>
 <div id="age">
 </div>
</body>
</html>

developerKumar · Accepted Answer · 2019-11-26 08:35:02Z

3

Find the code below, I just parsed the entered input to an integer and added a check that value should be between 1970 & 2018 inclusive. I also added the string as you asked.

function age(){
let x = document.getElementById('txtYear').value;
if(isNaN(x)){
alert("Value entered is not numeric");
return;
}
let num = parseInt(x)
if(x.length == 0 || num < 1970 || num > 2018) {
alert("Numbers should be between 1970 and 2018");
return;
}

var age = 2018-parseInt(x);
document.getElementById('age').innerText="Your age in 2018 is "+age+" years old";
}

<html>
<head>
</head>
Enter Year of Birth: <input type="text" id="txtYear" />
 <button onClick="age(txtYear.value)">Calculate Age</button>
 <br><br>
 <div id="age">
 </div>
</body>
</html>

answered Nov 26, 2019 at 8:35

developerKumar

1,79612 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johnson Lee · Accepted Answer · 2019-11-26 08:38:17Z

you can use >/< to detect the number user inputed; and you can use + to concat strings continuously

and actually the year user inputed can not be greater than current year, so you can use (new Date()).getFullYear()

function age(){
let x = document.getElementById('txtYear').value;
if(x < 1970 || x > (new Date()).getFullYear()) {
alert("Numbers should be between 1970 and " + (new Date()).getFullYear());
return;
}

if(isNaN(x)){
alert("Value entered is not numeric");
return;
}

var age = 2018-parseInt(x);
document.getElementById('age').innerText="Your age in 2018 is "+age + " years old";
}

Enter Year of Birth: <input type="text" id="txtYear" />
 <button onClick="age(txtYear.value)">Calculate Age</button>
 <br><br>
 <div id="age">
 </div>

igg · Accepted Answer · 2019-11-26 08:44:21Z

1

You could change the type of the input tag to "number" and set the min and/or max properties on it.

Instead of:

<input type="text" id="txtYear" />

Use:

<input type="number" min="1970" max="2017" id="txtYear" />

answered Nov 26, 2019 at 8:44

igg

2,2803 gold badges13 silver badges37 bronze badges

Comments

Constantin Trepadus · Accepted Answer · 2019-11-26 08:46:58Z

0

Best way is to use moment js. you can either use cdn from here https://cdnjs.com/libraries/moment.js/ or just download it

Here is a "dirty" simple snippet so you can understand it better:

var todayYear = moment(); // getting todays date as moment object

var input = "1980" //your sanitized string input from page
var inputYear = moment(input); // converterting string to moment object
var yearDifference = moment.duration(todayYear.diff(inputYear)); // moment does the math for you
var result = Math.floor(yearDifference.asYears()); // flooring moment object
alert(result);

answered Nov 26, 2019 at 8:46

Constantin Trepadus

5133 silver badges10 bronze badges

Comments

user6250770 · Accepted Answer · 2019-11-26 08:47:45Z

var calculateAge = function(birthday) {
    var now = new Date();
    var past = new Date(birthday);
    if(past.getFullYear() < 1970 || past.getFullYear() > 2018) {
		alert("Numbers should be between 1970 and 2018");
		return;
    }else{
    var nowYear = now.getFullYear() -1;
    var pastYear = past.getFullYear();
    var age = nowYear - pastYear;
    return age;
    }
};

$('#age').submit(function(e) {
    e.preventDefault();
    var $birthday = $('#birthday').val();
    alert('you are ' + calculateAge($birthday) + ' years old');
});

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<form action="#" method="post" id="age">
    <label for="birthday">Birthday (yyyy-mm-dd)
        <input type="text" name="birthday" id="birthday" />
    </label>
    <input type="submit" name="submit" value="Calculate your age"/>
</form>

Collectives™ on Stack Overflow

using javascript for putting range

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related