In this lesson, we will look at how to capture user input from a text box. We can use either the document.getElementById() method or the document.querySelector() method to get a text input element and then access the value that has been entered by the user.

In the example below, an event listener is used to wait for a click event on a button. When the button is clicked, the document.querySelector() method is used to get access to the text input element and the value property is referenced to get the actual value inputted by the user into the text input element that has a specific id (“#myTextInput). The querySelector() method is then used to change the innerHTML content of the paragraph element with the id “message”.