© Source unknown. All rights reserved.
This content is excluded from our Creative
Commons license. For more information,
You'll also need a modern standards-compliant web browser with developer tools installed in it. We recommend either:
Use the editor to construct the simple HTML user interface you see on the right. You'll need to use HTML elements like div, textarea, button, and a. Wrap the whole thing in a div element.
Use the developer tools in your browser to display the HTML tree and find the textarea node you just created.
Add jQuery to your web page, which you can do with the following line of code:
Attach an event listener to your Send button that calls console.log() to display the text area's contents in your developer console. You will find it useful to:
Now we want to display a log of sent messages in the UI itself. First add the following HTML code to the end of your UI, so that you have a place to put the messages:
<div id="sent" style="font-style: italic"> <div>Sent messages appear here.</div> </div>
Enhance your event listener on the Send button so that it appends the textarea's contents to this list. For example, if the textarea has "message 1" in it, then pressing Send should change the page as follows:
<div id="sent" style="font-style: italic"> <div>Sent messages appear here.</div> <div>message 1</div> </div>
There are several ways to do this. You may find the following jQuery methods useful: