javascript setAttribute'className'适用于onLoad,但不适用于onClick

时间:2010-09-02 20:37:15

标签: javascript events dom

为什么以下适用于onLoad,而不是onClick,以及解决方案是什么? 提前谢谢......

<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>

1 个答案:

答案 0 :(得分:0)

您的文档中的哪个位置是此脚本?执行此脚本时,是否可能尚未加载包含Button1的DOM元素?您可以尝试将它放在身体之后的脚本标记中,而不是放在头部,或将其包装在随后在onload元素中执行的函数中。

编辑:既然问题有代码标签,我可以看到它在脚本标签中。我仍然建议将它包装在函数中并使用onLoad调用,以确保在执行脚本之前完全加载DOM。