Contact us about a service.
We would love to work with you! Please fill out the form below and we will reach out to you shortly. Thank you!
BRAND STRATEGY ● WEBSITE DESIGN ● DIGITAL MARKETING
Jose Esquivel
Today's message
Javascript Tutorial
Displaying user input
In this example we will use document.getElementById(id); and your input to display a message on the page. Give it a try below.
hello
We use document.getElementById("tryme") to get the element from the HTML with the id of "tryme".
addEventListeners("click,getname,false")adds the behaivor to the button "tryme". It gives it instructions to run the getname function when clicked.
document.getElementById("tryme").addEventListener("click",getname, false)
<input type="text" name="userInput" id="userInput">
<button type="button" class="button" id="tryme">Try me</button>
This getname() function is telling the document to get the element named "usesrMessage" and write html by using innerHTML.
We make the innerHTML = to our desired message. We want to get the name from the userInput box and have it display its value.
function getname() {
document.getElementById("userMessage").innerHTML = userInput.value + ", Lets learn how to code";
}
To get the value the user writes in the box we have to instruct javascript to get the value inside. To do so we create a variable using var and have it = to the HTML input id.
To display the message I created a div element with the id of userMessage and followed the same technique to get it from our html.
var userMessage = document.getElementById("userMessage");
var userInput = document.getElementById("userInput");
Finally, we put the pieces together. We reference userInput and add .value after it. This will get the value inside the userInput element, which in this scenario is a name. We then add + and a custom message between quotations "" followed by a semicolon ; to complete it.
function getname() {
document.getElementById("userMessage").innerHTML = userInput.value + ", Lets learn how to code";
}
<h3 id="userMessage">hello</h3>