Question

是否可以在HTML文件中使用var代码，但在.js文件中可以使用其余的脚本？

例如我的代码是

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript">
    // First Image
    var image = document.getElementById('kximg0');
    var link = document.getElementById('tooltipname');
    var tooltipname = document.getElementById('tooltipname');
    var namebelowimg = document.getElementById('namebelowimg');
    image.src = "your image link for first image here";
    link.title = "Movie title ex Batman (2008)";
    tooltipname.href = "link to site when movie is clicked";
    namebelowimg.innerHTML = "movie name here";
    // End First Image
    </script>
</head>
<body>
    <p id="namebelowimg">this</p>
    <img id="kximg0" src="this-is-a-image-link"><br>
    <a id="tooltipname" title="title">img</a>
</body>
</html>

但是可以这样做，如果是这样的话，我如何告诉JavaScript在Body Tags之间搜索id，因为脚本在Head Tag中，并且只在{{1}中搜索标签，但我不会在body标签中使用脚本，因为如果不可能，它会更容易在head标签中访问，那么是否可以在html中包含head文件和var下面的脚本在一个单独的.js文件中？我的下面的例子应该更好地解释。

html文件

vars

js file

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    // First Image
    var image = document.getElementById('kximg0');
    var link = document.getElementById('tooltipname');
    var tooltipname = document.getElementById('tooltipname');
    var namebelowimg = document.getElementById('namebelowimg');
    // End First Image
    </script>
</head>
<body>
    <p id="namebelowimg">this</p>
    <img id="kximg0" src="this-is-a-image-link"><br>
    <a id="tooltipname" title="title">img</a>
</body>
</html>

如果您需要更好的示例请转到here

Answer 1

您getElementById将无效，因为脚本在呈现正文之前执行。使其工作的最简单方法是在主体之后移动脚本标记。

其他方式可能是等待正文加载

<script>
function init(){
    var image = document.getElementById('kximg0');
    var link = document.getElementById('tooltipname');
    var tooltipname = document.getElementById('tooltipname');
    var namebelowimg = document.getElementById('namebelowimg');
}
document.addEventListener('DOMContentLoaded', init, false); //this event listener will wait until body is rendered
</script>

JavaScript可以在.html

html文件

js file

1 个答案: