I've been creating a JS website where it tells you your age in days. I wrote the code, so that, if you were born before 1990, the website says "Yikes you're old". I styled that text apart from the other text but the output was on another line. I want to bring both texts on the same line. I don't know how to do that, so your help is greatly appreciated. Here's the JS code:
function ageInDays() {
// variables
var birthYear = prompt("What Year Were You Born In?");
var ageInDayss = (2021 - birthYear) * 365;
//text
if (birthYear>1990) {
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 {
var h1 = document.createElement('h1');
var h2 = document.createElement('h2');
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);
}
}
How do I bring the "else" output on one line?
Does in need to be explicitly h1 and h2? They are block elements by default and is not really a good practice to use an element for something else (using it inline) than it was created for.
I'd recommend using span
...
var text1 = document.createElement('span');
var text2 = document.createElement('span');
...
and styling it accordingly.