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.
"fname" and "lname" are not ids. You have incorrectly assigned types on your input fields. Instead do something like this:
<input type="text" id="fname" placeholder="First Name" />
<input type="text" id="lname" placeholder="Last Name" />
Your input elements do not have ids.
You did not add id to your input tags.
try :
<input id="fName" placeholder="First Name" />
<input id="lName" placeholder="Last Name" />