Home arrow JavaScript arrow Page 4 - JavaScript Events
JAVASCRIPT

JavaScript Events


In our last article we left off with a glimpse of JavaScript Events. In this tutorial we are going to go through each one and learn how to use them to create more dynamic web sites. So slap on your seat belts and get your helmets ready. This is gonna be an action-packed episode.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
November 26, 2007
TABLE OF CONTENTS:
  1. · JavaScript Events
  2. · OnBlur
  3. · OnChange
  4. · OnClick
  5. · OnDblClick

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
JavaScript Events - OnClick
(Page 4 of 5 )

The OnClick Event is triggered when someone clicks an object. There are a variety of uses for this, but we are going to use it to concatenate two fields into one.


<html>

<body>


First Name: <input type="text" id="field1" value="James ">

<br />

Last Name: <input type="text" id="field2" value="Payne">

<br /><br />

Full Name: <input type="text" id="field3">

<br /><br />

Click the button below to combine the First and Last Names<br />

<button onclick="document.getElementById('field3').value=

document.getElementById('field1').value + document.getElementById('field2').value">Click Me!</button>


</body>

</html>

The above example creates three text boxes. The first and second boxes hold a predefined value (you can delete the value and put whatever you want in the text boxes). The third box remains empty. When you click the Click Me! button it triggers the OnClick event, adding the string in the first text field to the string in the second field, resulting in: James Payne

Supporting HTML Tags: <a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supporting Javascript Objects: button, document, checkbox, link, radio, reset, submit


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
- Dynamic jQuery Styling

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 7 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials