Javascript 从 body 到 js 文件

Javascript from body to js file

本文关键字：js 文件 body Javascript      更新时间：2023-09-26

我是JS的真正菜鸟，我的HTML正文中有以下代码：

  var secDuration = 5;
  var image = 1;
  var maxImages = 4;
  var slider = document.getElementById('slider');
 function changeImage(requiredImage) {

    if (!requiredImage && requiredImage != 0){
      if(image < maxImages){
        image++;
      }
      else{
        image = 1;
      }
    }
    else{ 
      if(requiredImage > maxImages){
        image = 1;
      }
      else if(requiredImage < 1){ 
        image = maxImages;
      }
      else{
        image = requiredImage;
      }
    }
    slider.className = "image"+image;
    clearTimeout(timeout)
  }
  function nextImage(){
    changeImage(image+1);
  }
  function prevImage(){
    changeImage(image-1);
  }
  changeImage(1);

问题是，当我将其粘贴到正确连接到HTML的js文件中时，该脚本不再起作用。我尝试了几种解决方案，但我可能错过了一些东西。帮助将不胜感激。

提前谢谢。

JavaScript 文件的有效嵌入是：

<html>
<head>
    ...
    <script type="text/javascript" src="/path/to/script.js"></script>
</head>
<body>
    ...
</body>
</html>

确保你以同样的方式完成。

然后，当页面完全加载时，您必须处理 HTML 页面中的元素，因此在 window.onload 方法中移动document.getElementById这样的语句：

window.onload = function() {
    slider = document.getElementById('slider');
};

因此，更新后的脚本应如下所示：

var image = 1;
var maxImages = 4;
var slider;
function changeImage(requiredImage) {
    if (!requiredImage && requiredImage != 0) {
        if (image < maxImages) {
            image++;
        }
        else {
            image = 1;
        }
    }
    else {
        if (requiredImage > maxImages) {
            image = 1;
        }
        else if (requiredImage < 1) {
            image = maxImages;
        }
        else {
            image = requiredImage;
        }
    }
    slider.className = "image" + image;
    clearTimeout(timeout)
}
function nextImage() {
    changeImage(image + 1);
}
function prevImage() {
    changeImage(image - 1);
}
window.onload = function() {
    slider = document.getElementById('slider');
    changeImage(1);
};​
相关文章：