JavaScript Console
On page debugging with a simple script
It can be frustrating if you want to print a display in your JavaScript. The standard method for doing this is to use an alert statement to display what you want to see. Not only are alerts annoying, they take focus away from the current object and can make your display meaningless. Here is a different approach.
I use a script that creates a div tag and alters it's inner html. That way I can see my displays right on the page I'm working on.
function writeToConsole(someText, prefix){
consoleElement = document.getElementById('htmlConsole');
if(consoleElement!=null)
consoleElement.innerHTML = prefix ?
someText + '<br/>' + consoleElement.innerHTML :
consoleElement.innerHTML + '<br/>' + someText;
}
document.write('<div id="htmlConsole" style="height:100;' +
'overflow:scroll" > </div>');
To write to the console, just make a call to writeToConsole.
//Write message to the bottom of the console
writeToConsole('aMessage');
//Write message to the top of the console
writeToConsole('aMessage', 1);
Here is an example.
<a href="javascript: ;" onMouseOver="writeToConsole('Mouse over', 1)" onMouseOut="writeToConsole('Mouse out', 1)">Mouse over me</a>
Mouse over me