Currently, I am going back to basics in JavaScript and realizing that my foundation is not as strong as I had assumed. It seems like I need a fresh perspective because I can't seem to pinpoint where the code error lies.
(A lot of the resources I found online mentioned using a fixed value for conditionals, such as 'var age = #', but did not address scenarios where it varied based on user input.)
Your assistance would be greatly appreciated! Thank you in advance!
const ageInput = document.querySelector("#ageInput");
const paraContent3 = document.querySelector(".paractice3-p");
const enter = document.querySelector(".enter");
function checkAge() {
const age = ageInput.innerHTML;
if (age < 10) {
paraContent3.innerHTML = "You would roughly be in elementary";
} else if (age < 14) {
paraContent3.innerHTML = "You would roughly be in middle school";
} else if (age < 18) {
paraContent3.innerHTML = "You would roughly be in high school";
} else {
paraContent3.innerHTML = "You're out of school!";
}
}
enter.addEventListener("keydown", function (e) {
if (e.target == 13) {
checkAge();
}
});#practice3 {
display: flex;
flex-direction: column;
text-align: center;
}
#practice3 h1 {
text-transform: uppercase;
}
#practice3 input {
text-align: center;
width: 30%;
position: relative;
left: 50%;
transform: translate(-50%);
padding: 10px;
text-transform: capitalize;
}
#practice3 .enter {
text-transform: uppercase;
width: 20%;
padding: 10px;
margin-top: 10px;
position: relative;
left: 50%;
transform: translate(-50%);
}<section id="practice3">
<h1>what is your age?</h1>
<input id="ageInput" type="number" min="1" placeholder="enter your age">
<p class= "practice3-p"></p>
<button class="enter">enter</button>
</section>