Extracting user input values from HTML <input> elements and passing them as function arguments to JavaScript updates the DOM dynamically.

HTML & Vanilla JavaScript Event Handler

index.htmlhtml
<input type="text" id="usernameInput" placeholder="Enter username">
<button onclick="displayGreeting(document.getElementById('usernameInput').value)">Submit</button>
 
<p id="outputResult"></p>
 
<script>
function displayGreeting(name) {
    document.getElementById("outputResult").textContent = "Hello, " + name + "! Welcome to Lynxbee.";
}
</script>