I am creating a website where if you input the year you were born in, the website will output your age in days. The code works for the most part. When I press the submit button, the age outputs for 1 second and then leaves the screen. I want the text to stay there. Here's my JS Code:
function ageInDays() {
// variables
var birthYear = <?php echo $_GET["name"];?>;
var thisYear = new Date();
var ageInDayss = (thisYear.getFullYear() - birthYear) * 365;
//text
if (isNaN(birthYear) == false) {
if (birthYear<=1920 || birthYear>=2022) {
var h1 = document.createElement('h1');
var textAnswer = document.createTextNode("Invalid Input. Please Try
Again.");
h1.setAttribute('id', 'ageInDays');
h1.appendChild(textAnswer);
document.getElementById('flex-box-result').appendChild(h1);
}
else if (birthYear>1990 && birthYear<2021) {
var h1 = document.createElement('h1');
var textAnswer = document.createTextNode("You are " + ageInDayss + " days
old.");
h1.setAttribute('id', 'ageInDays');
h1.appendChild(textAnswer);
document.getElementById('flex-box-result').appendChild(h1);
}
else if (birthYear>1920 && birthYear<1990) {
var h1 = document.createElement('span');
var h2 = document.createElement('span');
var textAnswer = document.createTextNode("You are " + ageInDayss + " days
old.");
var textAnswer1 = document.createTextNode(" Yikes... that's old.");
h1.setAttribute('id', 'ageInDays');
h2.setAttribute('id', 'yikes');
h1.appendChild(textAnswer);
h2.appendChild(textAnswer1);
document.getElementById('flex-box-result').appendChild(h1).appendChild(h2);
}
}else{
var h1 = document.createElement('h1');
var textAnswer = document.createTextNode("Invalid Input. Please Try Again.");
h1.setAttribute('id', 'ageInDays');
h1.appendChild(textAnswer);
document.getElementById('flex-box-result').appendChild(h1);
}
}
When I run the code, the text only outputs for 1 second. How can I fix this?
