How to create log messages using javascript

Posted by on February 14, 2010 Leave a comment (0) Go to comments

Introduction:
In this article demostrates,how to add the logging functionality in javascript.

Main:
Many JavaScript libraries provide built-in logging features similar to the logging packages of
other development environment.

See this below simple examble,

Function we using for capturing log messages,
function log(message) {
message_list = document.getElementById(“debugging_messages”);
log_message = document.createTextNode(message);
log_list_item = document.createElement(‘li’);
log_list_item.appendChild(log_message);
message_list.appendChild(log_list_item);

<html>
<head>
<title>A Simple Logging Example</title>
</head>
<body id=”console” onLoad=”log(‘The body has been loaded!’)”>
<div id=”main”>
<script type=”text/javascript” charset=”utf-8”>
function sendMessage() {
textbox = document.getElementById(‘log_message’);
message = textbox.value;
textbox.value = “”;
log(message);
}
 
function log(message) {
message_list = document.getElementById(“debugging_messages”);
log_message = document.createTextNode(message);
log_list_item = document.createElement(‘li’);
log_list_item.appendChild(log_message);
message_list.appendChild(log_list_item);
}
</script>
<input type=”text” name=”log_message” value=”” id=”log_message” />
<input type=”submit” name=”submit_button”
value=”Append Message!”
id=”submit_button”
onClick=”log(‘Submit Clicked’); sendMessage();”/>
</div>
<div id=”debugging_output”
style=”width: 100%; border: 1px solid black;”>
<h1>Debugging Output</h1>
<ol id=”debugging_messages”>
</ol>
</div>
</body>
</html>