js引用代码位置问题

老师，以前老师讲解的是：将js代码放在body中，而您现在讲解的是：js引用代码放在了Head中

我发现了两个问题希望老师能讲解一下：

当我把js代码放在Head中的时候，代码如下：

<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body onload="init()">

function init() {
    var result = document.getElementById("result");
    result.value = 0;
    mouseDownEvent();
}
function mouseDownEvent() {
    byId("num-0").onmousedown = function () {
        this.style.backgroundImage = "url('img/activation/0.png')";
    };
    byId("num-0").onmouseup = function () {
        this.style.backgroundImage = "url('img/default/0.png')";
    };
}

function byId(elementName) {
    document.getElementById(elementName);
}

这时候，运行程序，网页报错：

Uncaught TypeError: Cannot set property 'value' of null at init

但是这个错误能够用一下方法解决：将js引用代码放在body中

但是如果将引用代码放在body中，然后在body后添加onload属性调用“init（）”时，会发生错误：

Uncaught TypeError: Cannot set property 'onmousedown' of undefined at mouseDownEvent，

但这个错误可以将body的onload属性去掉就可以解决。

那么请问老师：

js引用代码到底应该放在哪里？放的位置不同，他的区别又在哪里？

China_Wang 2019-04-22

源自：案例：仿计算器 2-2 计算器输入框

收起

1回答

芝芝兰兰回答被采纳获得+3积分 2019-04-23 14:06:21

同学你好。通常情况下，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但是两种情况也要根据使用场景的不同来考虑如何使用。

1、将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的，这种用法，可以确保在需要使用脚本之前，它已经被载入了。在HTML中展示的内容需要先经js计算时，或者HTML绑定了js函数作为触发事件时适用于这种。

2、将 JavaScript 代码放置于 <body></body> 之间的。就是同学描述的这种情况：我们的js中需要拿到result的value值，但是dom还没有完全加载。由于 HTML 文档是由浏览器从上到下依次载入的，为避免 JavaScript 代码操作 HTML 元素时，HTML 元素还未载入而报错（对象不存在），因此需要将这段代码写到 HTML 元素后面。

如果解答了同学的疑问，望采纳~

祝学习愉快~

收起回答