How to get the object value on my text input?

April 23, 2022

var fname = document.getElementById("fName");
var lname = document.getElementById("lName");
const btnSave = document.getElementById("btnSave");
const btnDisplay = document.getElementById("btnDisplay");

btnSave.addEventListener("click", getData);

function getData() {
  console.log(
    getFullName({
      fname: `${fname.value}`,
      lname: `${lname.value}`,
    })
  );
}

function getFullName(FullName) {
  return FullName.fname + " " + FullName.lname;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <input type="fName" placeholder="First Name" />
    <input type="lName" placeholder="Last Name" />
    <button id="btnSave">Save</button>
    <button id="btnDisplay">Display</button>

    <script src="main.js"></script>
  </body>
</html>

How to get the object value on my text input?
It returns null. But when I assign value on my object like fName: "John", lName: "Doe"
It returns successfully.