//INPUT: Text input

<New code>

//INPUT HTML: <input id="inputId" type="text" value="default text">
— displays a text input line:

//INPUT HTML: <textarea id="inputId" rows="2" cols="30"> default text </textarea>
— displays a text input box:

//INPUT JS: var enteredText = document.getElementById( "inputId ").value
— stores what was typed into #inputId into the variable enteredText

//INPUT JS: document.getElementById( "inputId" ).onchange = mainProcedure;
— triggers mainProcedure() on tab and enter after an input change

Two ways to input text strings

There are a couple of ways to enter text into a web page.

For short strings, use an input line

<input id="inputId" type="text" value="default text">
displays:

For long strings, use a textarea box

<textarea id="inputId" rows="4" cols="50"> default text </textarea>
displays:

Using Javascript to read text strings

You can program scripts to read the text that your users have entered.

The entered text in stored inside document.getElementById( "inputId" ).value

Using onchange to trigger functions when text is editted

Remember how you can use onclick to trigger a function when something is clicked?

Well, if you add onchange to an input element, you can trigger a function whenever someone presses tab or enter after changing a text input.

For example: document.getElementById( "inputId" ).onchange = mainProcedure;

However, most users have come to expect a button to trigger things as well. Use both a button and onchange when possible.

Example code

...is the result of the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    
    <body id='bodyId'>
        <h1>Displaying and reading text input</h1>
        <p>This does not actually change the colors on the page - <strong>YET!</strong></p>
        <p>
            Enter a font color:
            <input id="fontId" type="text" value="blue"><br>
            
            <button id="fontButtonId">
                pop up <code>document.getElementById( "fontId" ).value</code> 
            </button><br>
            <br>
            
            Enter a background color:<br>
            <textarea id="backgroundId" rows="5" cols="40">lightBlue</textarea><br>

            <button id="backgroundButtonId">
                pop up <code>document.getElementById( "backgroundId" ).value</code> 
            </button>
        </p>
        
        <script>
            //INPUT-OUTPUT: read in and then display the font color
            var showFontColor = function (){
                //INPUT: store the color that was typed into the input line
                var newFontColor    = document.getElementById( "fontId" ).value;
                
                //OUTPUT: display what color was typed as a pop up message
                alert( newFontColor );
            }
            
            //INPUT-OUTPUT: read in and then display the background color
            var showBackground = function (){
                //INPUT: store the background color that was typed into the textarea
                var newBackground   = document.getElementById( "backgroundId" ).value
                
                //OUTPUT: display what background color was typed as a pop up message
                alert( newBackground );
            }
            
            //INPUT: attach showFontColor to fontId
            document.getElementById( 'fontId' ).onchange            = showFontColor;
            //INPUT: attach showFontColor to fontButtonId
            document.getElementById( 'fontButtonId' ).onclick       = showFontColor;
            
            //INPUT: attach showBackground to backgroundId
            document.getElementById( 'backgroundId' ).onchange      = showBackground;           
            //INPUT: attach showBackground to backgroundButtonId
            document.getElementById( 'backgroundButtonId' ).onclick = showBackground;           
        </script>
    </body>
</html>