Your errors were a combination of typos (which would be a valid close reason), and a misunderstanding of how to use HTML <input> elements, and their values, in a String.
First, we'll look at the mistakes:
function getEls() {
// here, you retrieve an element correctly but don't
// assign it to a variable, and you do nothing with it;
// this is valid JavaScript, and not necessarily an error,
// but it's entirely pointless:
document.getElementById("answer");
// the reason that this works is the legacy of a terrible
// decision by Microsoft - years ago - to make any element
// with an id an automatic global variable, with the variable-
// name being the (unique) id of that element. This is
// a common implementation, but not listed in the spec so
// it may change in future; don't rely on the behaviour (and
// ideally don't use global variables):
answer.innerHTML =
// here you have hard-coded String components to which
// you want to interpolate/concatenate your supplied
// variables; unfortunately (for reasons unknown) you chose
// to leave the String unquoted (so, in JavaScript, these
// become undeclared variables), and you've quoted the
// variable names (and a lone white-space):
(Hello + "fname" + " " + "lname" + your user id is " uid" + and your birthday is + "bday".);
// Also, you seem to have a '+' operator missing, which
// contributes to the 'missing ) in parenthetical' error.
}
To correct this:
<p>Please enter your First Name: <input type="text" id="fname"></p>
<p>Please enter your Last Name: <input type="text" id="lname"></p>
<p>Please enter your User ID: <input type="text" id="uid"></p>
<p>Please enter your date of birth: <input type="date" id="bday"></p>
<button onclick="getEls()">Click Here<br>
When Done</button>
<script>
function getEls() {
let answer = document.getElementById("answer"),
fname = document.getElementById('fname'),
uid = document.getElementById('uid'),
bday = document.getElementById('bday');
answer.innerHTML = ("Hello" + fname.value + " " + lname.value + "your user id is " + uid.value + " and your birthday is " + bday.value + ". ");
}
</script>
<p id=answer></p>
JS Fiddle demo.
Now, while that works, we're going to refine it towards code that's more DRY (don't repeat yourself), and also towards unobtrusive JavaScript, which moves the event-handling out of the HTML:
// using a simple named function, using Arrow syntax, to retrieve an element
// via its assigned 'id' attribute-value (this is optional, but personally I
// don't like typing 'document.getElementById(...)' more than once):
const dGEBI = (id) => document.getElementById(id),
// your function, declared as a constant (on the assumption you're
// unlikely to redefine the function through the lifetime of your
// page):
getEls = function () {
// we retrieve the various elements, and assign them to
// variables:
let answer = dGEBI('answer'),
// we retrieve the <input> elements, and cache their values:
fname = dGEBI('fname').value,
lname = dGEBI('lname').value,
uid = dGEBI('uid').value,
bday = dGEBI('bday').value;
// here we use a template-literal to construct the String; this is
// delimited by backticks; and we can directly interpolate JavaScript
// variables or the results of JavaScript expressions into the String,
// by wrapping them with curly-braces ('{...}') and prefixing with a '$'
// character:'
answer.innerHTML = `Hello ${fname} ${lname}, your user id is: ${uid}, and your birthday is: ${bday}. `
}
// here we use document.querySelector() to retrieve the first (if any) element matching
// the supplied CSS selector; and then use EventTarget.addEventListener() to bind
// the getEls() function (note the deliberate lack of parentheses) as the event-handler
// for the 'click' event:
document.querySelector('button').addEventListener('click', getEls);
<p>Please enter your First Name: <input type="text" id="fname"></p>
<p>Please enter your Last Name: <input type="text" id="lname"></p>
<p>Please enter your User ID: <input type="text" id="uid"></p>
<p>Please enter your date of birth: <input type="date" id="bday"></p>
<button>Click Here<br>When Done</button>
<p id=answer></p>
JS Fiddle demo.
Next, We'll take a look at your HTML; and use <label> elements:
const dGEBI = (id) => document.getElementById(id),
getEls = function() {
let answer = dGEBI('answer'),
fname = dGEBI('fname').value,
lname = dGEBI('lname').value,
uid = dGEBI('uid').value,
bday = dGEBI('bday').value;
answer.innerHTML = `Hello ${fname} ${lname}, your user id is: ${uid}, and your birthday is: ${bday}. `
}
document.querySelector('button').addEventListener('click', getEls);
label {
display: block;
}
label:last-of-type {
display: revert;
}
<!-- Here, we've replaced the <p> elements with <label> elements; this
allows the user to click the text of the <label> to focus the
associated <input> element: -->
<label>Please enter your First Name: <input type="text" id="fname"></label>
<label>Please enter your Last Name: <input type="text" id="lname"></label>
<label>Please enter your User ID: <input type="text" id="uid"></label>
<!-- I've taken a different approach here, and used the 'for' attribute to
associate the <input> and <label>; for this approach the 'for' attribute
must contain the exact 'id' attribute-value of the relevant <input>: -->
<label for="bday">Please enter your date of birth: </label> <input type="date" id="bday">
<button>Click Here<br>When Done</button>
<p id=answer></p>
JS Fiddle demo.
References:
HTML:
answer.innerHTML = `Hello ${fname} ${lname} your user id is ${uid} and your birthday is ${bday}`. See more about string interpolation here"mixed up - you need"around the literal string - ie the static text or non-variable part, eg"Hello " + fname + "."fnamerefers to the input with id=fname, not the value itself, so you need"Hello " + fname.value + "."- having said that, don't use the global variable, instead usedocument.getElementById("fname").valuedocument.getElementById("answer");to a variable, otherwise it's doing nothing for youmissing ) in parentheticaland given you a place to start tracking down your error(s).