I am attempting to create a feature where text is displayed as soon as it is typed into an input box. Currently, my JavaScript function is not working at all. I simply want the function to display text when it is typed into or erased in the text boxes.
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="output-box">
<P class="Output-text"></P>
<P class="Output-text2"></P>
</div>
<div class="forms">
<form action="POST">
<label class="label" for="name">First Name:</label>
<input type="text" id="name" name="name" onchange="GetAndDisplayInput()">
<br>
<br>
<label class="label" for="name">Last Name:</label>
<input type="text" id=" last-name" name="name" onchange="GetAndDisplayInput()">
</form>
</div>
<script>
function GetAndDisplayInput(){
var inputFirstName= document.getElementById("name").value;
var inputLastName= document.getElementById("last-name").value;
document.getElementsByClassName("Output-text")[0].innerHTML = inputFirstName;
document.getElementsByClassName("Output-text2")[0].innerHTML = inputLastName;
}
</script>
</body>
</html>