Javascript偵錯手記

決定該收合懶惰的心了
今天一個同事問我一個奇怪的問題：一段javascript放在Function外可以正常的執行完，而放在一個function裡由Button觸發卻總出錯！
我看了一下他的代碼(如下代碼為仿原代碼製作，原代碼非為textbox,而是一個不可視的activex的object)：

<input type="text" id="txt01" value="0001">
<input type="text" id="txt02" value="0002">
<input type="button" value="test" onclick="test()">
<script language="javascript">
//function test()
//{
   alert(document.all.txt01.value);
   document.write(document.all.txt01.value);
   alert(document.all.txt02.value);
   document.write(document.all.txt02.value);
//}
</script>

按照他的方式執行了兩次，果然加上上述的注釋符時，運行正常；而取消上述注釋時，就在alert(document.all.txt02.value)時，總提示document.all.txt02.value為空白或不是對象。
初時我也百思不得其解，甚至以為是那個ActiveX的object因為安全性，在讀第二次時已經到期了，但我又想，如果是這樣，那不加上Function為什麼又正常呢？我一再地檢查代碼，就是不能發現問題。直到我忽然看到了"document.write"才似乎想起了什麼，把所有的document.write屏蔽後，一切正常。
原來一切都是document.write在搞鬼，如果當前頁面已經load完成，它的執行會把網頁第一次load的所有網頁元件清理掉；而如果當前頁面正在load中，則它的執行只會在當前load的代碼後面增加內容。這就是上面的問題造成的原因。