Change or Alter Text On click :
Input, of course, 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".
Onclick code using JavaScript:
<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>
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.
<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>
How This Code Work:
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.