Why does the following work for onLoad, and not onClick, and what would be the solution? Thanks in advance...
<head>
<title>Untitled Page</title>
<LINK href=CSS/showdetails.css type=text/css rel=stylesheet />
</head>
<body OnLoad="javascript:showdetails()">
<script language=JavaScript src=js/showdetails.js type=text/javascript></script>
<div id="divResults" style="OVERFLOW: auto; HEIGHT: 480px;">
<span id="ShowResults" style="VISIBILITY: hidden">Display Results</span>
<p><input id="Button1" type="button" value="button" /></p>
</div>
<script type="text/javascript">
var btn = document.getElementById('Button1');
btn.onclick = function() {showdetails();};
function showdetails() {
var xc = document.getElementById('ShowResults');
var top_ul = document.createElement('ul');
top_ul.setAttribute('className','detclass');
var li1 = document.createElement('li');
li1.appendChild(document.createTextNode('craig'));
var ul2 = document.createElement('ul');
var li2 = document.createElement('li');
li2.appendChild(document.createTextNode('Mike'));
ul2.appendChild(li2);
li1.appendChild(ul2);
top_ul.appendChild(li1);
xc.appendChild(top_ul);
var vis = "visible";
xc.style.visibility = vis;
}
</script>
</body>
</html>