The following script can be used instead of an alert to display messages on web pages during development. It creates a div section at the bottom of a page to hold messages. The div section has a button to clear text. The script uses a JavaScript object literal.
var messages= {
clear: function (){
var dcontents = document.getElementById(’cnts’);
dcontents.innerHTML ='’;
},
debug: function (vText){
var eldiv = document.getElementById(’msg’);
if(!eldiv){
var rdiv = document.createElement("div");
with(rdiv.style){
marginLeft= ‘120px’;
marginRight= ‘400px’;
borderStyle =’solid’;
borderWidth= ‘thin’;
borderColor =’rgb(160, 100, 255)’;
}
rdiv.setAttribute("id", "msg");
//top div
var dtop = document.createElement("div");
dtop.style.backgroundColor= ‘#99CC99′;
dtop.style.borderBottom= ‘1px solid black’;
dtop.style.textAlign = "right";
var anchor = document.createElement("a");
anchor.href = "javascript:messages.clear()";
var atext = document.createTextNode("Clear Messages");
anchor.appendChild(atext);
dtop.appendChild(anchor);
rdiv.appendChild(dtop);
var dcontents = document.createElement("div");
dcontents.setAttribute("id", "cnts");
dcontents.style.backgroundColor= ‘#CCCCCC’;
dcontents.style.paddingLeft= ‘10px’;
rdiv.appendChild(dcontents);
var bodyRef = document.getElementsByTagName("body").item(0);
bodyRef.appendChild(rdiv);
var txt = document.createTextNode(vText);
dcontents.appendChild (txt);
}
else{
var dcontents = document.getElementById(’cnts’);
var br = document.createElement("br");
dcontents.appendChild(br);
var sp = document.createElement("span");
var txt = document.createTextNode(vText);
sp.appendChild(txt);
dcontents.appendChild(sp);
}
}
}
Usage: messages.debug("some text");
You can view the demo page here.
