How to display username input after verification using JavaScript and HTML

Question

So there's a website I'm developing for a brewery that requires age verification. The verification works, It asks for your date of birth and first name. The only thing I need left is to display the name on the website with a greeting "Hey "your name"! Welcome to our Brewery! And only if you are between the ages 18 and 101.

 //get birthdate function calculateAge(dateString) { var today = new Date(); var birthDate = new Date(dateString); var age = today.getFullYear() - birthDate.getFullYear(); var m = today.getMonth() - birthDate.getMonth(); if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; } //validate user age const displayCheck = window.prompt( "Please Enter your birthdate in format YYYY/MM/DD" ); const name = window.prompt("Please Enter your Name"); const age = calculateAge(displayCheck); if (age < 18) { window.alert( "You Submitted that you are " + age + "years old, " + "" + name + "." ); window.alert( "You must be at least eighteen years old to visit this site. You will be re-directed to an appropriate site shortly!" ); window.location = "http://disney.com"; } else if (age > 18 && age < 101) { window.alert( "You are old enough to visit the site," + " " + "Welcome " + "" + name + "!" ); document.write(name) } else { window.alert("You must be honest about your age, " + name + "."); }

 <h1 class="display-2"> Hey <script src="script.js"> document.write(name) </script>! </h1>

Good news is that it worked, but the code validator doesn't like it.

What other ways are there to do this?

Thanks

Answer 1

You can call a function with the event onchange in your html and use the value in your javascript to show the output. To test it in my snippet, write your name in the input and click outside of it when you are done. That is when the event is triggered.

 function myFunction() { var name = document.getElementById("firstName").value; document.getElementById("greeting").innerHTML = "Hello " + name + " !"; }

 <input id="firstName" type="text" onchange="myFunction()"><br> <div id="greeting"></div>

If you want to add a condition to display the name only if the user is over 18 years old, you would need to place the event into the age input instead and depending of its value, you could show his name or a message.. or nothing. It's up to you!

 function myFunction() { var age = document.getElementById("age").value; if (age > 17) { var name = document.getElementById("firstName").value; document.getElementById("greeting").innerHTML = "Hello " + name + " !"; } else { document.getElementById("greeting").innerHTML = "Sorry, you are not over 18 years old."; } }

 <input id="firstName" type="text" placeholder="enter your name"> <input id="age" type="text" onchange="myFunction()" placeholder="how old are you?"><br> <div id="greeting"></div>