Question

//this my javascript code written in a diffrent file i named jsTest.js

window.onload = function(){
   var firstBton = document.getElementById('ch1bton');
};
firstBton.onclick = function(){
document.getElementById("addhere").innerHTML = "Test Ok";
};


// here the code in the html code from a test.html page

<script src="jsTest.js">
</script>

<table>
<tr id="ch1">
<td>Hully Fly</td>
 <td>$30.00</td>
<td><input type="button" value="Add" id="ch1bton"/></td>
</tr>  
</table>

<p id="addhere"> </p>

为什么只有当我将脚本文件放在html文件的按钮上时才能使用，而我正在使用window.onload方法。无法想出来的？

Answer 1

检查你的控制台，你几乎肯定有错误。这是因为firstBton是在onload函数范围内声明的，但您尝试在onload事件触发之前使用它，并且超出{{1}的范围处理程序。

这就是我的想法。

onload

工作演示：

＆＃13;

window.onload = function(){
   var firstBton = document.getElementById('ch1bton');
    firstBton.onclick = function(){
        document.getElementById("addhere").innerHTML = "Test Ok";
    };
};

＆＃13;

window.onload = function(){
    var firstBton = document.getElementById('ch1bton');
    firstBton.onclick = function(){
        document.getElementById("addhere").innerHTML = "Test Ok";
    };
};

＆＃13;

Answer 2

这是因为firstBton在函数（onload回调）执行完毕后超出了范围。您应该将整个事情移动到window.onload函数，如下所示：

window.onload = function(){
   var firstBton = document.getElementById('ch1bton');
   firstBton.onclick = function(){
     document.getElementById("addhere").innerHTML = "Test Ok";
   };
};

JSFiddle

无法弄清楚为什么onload事件不起作用

2 个答案: