JavaScript User Input
JavaScript User Input : Clicks are powerful and easy and you can add an on Click event to pretty much any HTML element, but sometimes you need to be able to ask for input from the user and process it. For that you’ll need a basic form element and a button.
input id='userInput' size=60> <button onClick='userSubmit()'>Submit</button><BR> <P><div id='result'></div>
Here we create an input field and give it a name of user Input. Then we create a HTML button with an onClick event that will call the function userSubmit(). These are all standard HTML form elements but they’re not bound by a <form> tag since we’re not going to be submitting this information to a server. Instead, when the user clicks the submit button, the onClick event will call the userSubmit() function.
<script type='text/javascript'>
function userSubmit() {
var UI=document.getElementById('userInput').value;
document.getElementById('result').innerHTML='You typed: '+UI;
}
</script>Here we create a variable called UI which looks up the input field userInput. This lookup is exactly the same as when we looked up our feedback division in the previous example. Since the input field has data, we ask for its value and place that value in our UI variable. The next line looks up the result division and puts our output there. In this case the output will be “You Typed: ” followed by whatever the user had typed into the input field.
If you’d like to process the user input as the user types then simply attach an onKeyup event to the input field as such example,
input id='userInput' onKeyUp="userSubmit()" size=60><BR> <P><div id='result'></div>
There’s no need to modify the userSubmit() function. Now whenever a user presses a key while the userInput box has the focus, for each keypress, userSubmit() will be called, the value of the input box retrieved, and the result division updated.
JavaScript User Input Example
JavaScript Input, is a little more complicated. For now we’ll just reduce it to a bare click of the mouse. If everything in HTML is a box and every box can be given a name, then every box can be given an event as well and one of those events we can look for is “onClick”. Lets revisit our last example
<html>
<head>
</head>
<body>
<div id='feedback' onClick='goodbye()'>Users without Javascript see
this.</div>
<script type='text/javascript'>
document.getElementById('feedback').innerHTML='Hello Technosap!';
function goodbye() {
document.getElementById('feedback').innerHTML='Goodbye Technosap!';
}
</script>
</body>
</html>Here we did two things to the example, first we added an “onClick” event to our feedback division which tells it to execute a function called goodbye() when the user clicks on the division. A function is nothing more than a named block of code. In this example goodbye does the exact same thing as our first hello world example, it’s just named and inserts ‘Goodbye World!’ instead of ‘Hello World!’.
Another new concept in this example is that we provided some text for people without Javascript to see. As the page loads it will place “Users without Javascript will see this.” in the division. If the browser has Javascript, and it’s enabled then that text will be immediately overwritten by the first line in the script which looks up the division and inserts “Hello World!”, overwriting our initial message. This happens so fast that the process is invisible to the user, they see only the result, not the process. The goodbye() function is not executed until it’s explicitly called and that only happens when the user clicks on the division.
Also Read :JavaScript Output Writeln, alert and getElementById
Online Training Tutorials
JavaScript EventJavaScript Event : Imagine an interface where the only way to find out whether a key on the keyboard is being pressed is to read the current state of that key. To be able to react to […]- JavaScript Node.jsJavaScript Node.js, a program that allows you to apply your JavaScript skills outside of the browser. With it, you can build anything from small command line tools to HTTP servers that […]
- JavaScript ScopeJavaScript Scope refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. When a […]
- JavaScript “this” KeywordIn JavaScript "this" Keyword, as in most object-oriented programming languages, this is a special keyword that is used within methods to refer to the object on which a method is being […]
- JavaScript FunctionThe definition expression defines a JavaScript function, and the value of such an expression is the newly defined function. In a sense, a function definition expression is a “function […]
- JavaScript BooleanJavaScript Boolean, It is often useful to have a value that distinguishes between only two possibilities, like “yes” and “no” or “on” and “off”. For this purpose, JavaScript has Boolean […]
- JavaScript Interview Questions and AnswersJavascript is an interpreted language with a C like syntax. While many people brush the language off as nothing more than a browser scripting language, it actually supports many advanced […]
- JavaScript Comments with ExamplesJavascript supports two types of comments (JavaScript Comments). Double-slashes (//) tell javascript to ignore everything to the end of the line. You will see them used most often to […]