You can close the exercise-5.1.html file when finished.Įxercise 5.2 takes you through the steps of assigning a user-entered value to a variable, and then displaying that value on the web page.
Java script input box code#
Test that your code works by entering some text in the input field and clicking the 'Show user input' button'. Save your web page and reload your web browser. Your JavaScript code now look as shown below. This updates the content of the div element with an id of resultBox with whatever value is in the userInput variable. Next, under the second comment line, enter the following:ĭocument.getElementById("resultBox").innerHTML = ""+userInput+"" This places the value, entered by the user in the input field with an id of fname, in a variable named userInput. Under the first comment line, enter the following: The event handler links the button with the function at the bottom of the web page. Scroll back up to the input box and, just under it, enter this new line with a button and an event handler. * Place the value from the input field in a variable */Īt the moment, your new function contains only two comment lines. In VS Code, scroll down to the bottom of the web page, to just before the closing tag, and enter the following function inside a pair of script of tags. This is where you will display the value entered by the user. A div element with an id of resultBox.An input field with a type of text and an id of fName.In your websites/js-exercises/user-input sub-folder, open the following file in VS Code and your web browser: Exercise 5.1: Capturing a user-entered value with an input field The variable goes on the left hand side (LHS), and the value for assignment to the variable goes on the right hand side (RHS).Įxercise 5.1 takes you through the steps of assigning a user-entered value to a variable, and then displaying that value on the web page. You can see that the above two statements follow an important rule governing all use of the assignment operator (=):
Let userInput = document.getElementById("fName").value UserInput = document.getElementById("fName").value In JavaScript, you can then create a new variable such as userInput, and use the getElementById() method to assign the entered value to the variable as follows: In the example, above, the id is fName for 'First Name'. To do that, you need to give a unique id to the input field. The second is assigning the entered value to a variable in JavaScript code. The type of text means that the field can be used to capture any keyboard characters, such as letters, numbers, spaces or currency symbols.Ĭapturing information from a web page visitor is just the first step of a two-step process. The most common way to capture user-entered values on a web page is with a HTML input box. The real usefulness of JavaScript, however, is its ability to capture and manipulate values entered by the visitor to a web page.
In the above examples the values were assigned to the variables by you, the creator of the web page.
Java script input box how to#
In previous Lessons you learnt how to assign values to string and numeric variables with JavaScript statements such as the following. Uploading your JavaScript exercise files to GitHub Using HTML input fields to capture user-entered data Setting decimal places with the toFixed() method Using HTML input fields to capture user-entered dataĮxercise 5.1: Capturing a user-entered value with an input fieldĮxercise 5.2: Adding a Reset button to your web pageĮxercise 5.3: Working with numeric user data
0 kommentar(er)
