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
Next: OnDblClick >>
More JavaScript Articles
More By James Payne
/ 7 
