Home Javascript Javascript code for Input to One Click To Rule Them All
A+ A-

Javascript code for Input to One Click To Rule Them All

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".



<html>
<head>
</head>
<body>
<div id='feedback' onClick='goodbye()'>
Users without Javascript see this.</div>
<script type='text/javascript'>
document.getElementById('feedback').innerHTML='Hello World!';
function goodbye()
{document.getElementById('feedback').innerHTML='Goodbye World!';
}
</script>
</body>
</html>




Here 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 hello world example, it's just named and inserts 'Goodbye World!' instead of 'Hello World!'.

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.

While Javascript is nearly universal there are people who surf with it deliberately turned off and the search bots (googlebot, yahoo's slurp, etc) also don't process your Javascript, so you may want to make allowances for what people and machines are-not seeing.