What i'm trying to do is to display text immediately i type them into an input box,so far my javascript function doesn't even work at all,i just need the function to show when a text 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").innerHTML = inputFirstName;
document.getElementsByClassName("Output-text2").innerHTML = outputFirstName;
}
</script>
</body>
</html>
Try use the oninput event listener instead of onchange:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput
This will fire immediately after every change, as opposed to every time the element is blurred (unfocused / clicked away).
Example
function display() {
document.querySelector("p").innerText = document.querySelector("input").value;
}<input oninput="display();" placeholder="Type in some text">
<p></p>