Question

当我通过其他javascript文件将其链接时，我无法调用函数我想将其称为HTML，我该如何尝试添加脚本文件，但无法正常工作

<html>
  <head>
    <link href="home.css" rel="stylesheet" type="text/css">
    <script type="application/javascript" src="jj.js"></script>
    </script>
  </head>

  <body>
    <div class="container" id="showSlides()">
      <div class="image-sliderfade fade">
        <img src="img1.png" style="width:100%">
      </div>
      <div class="image-sliderfade fade">
        <img src="img2.png" style="width:100%">
      </div>
      <div class="image-sliderfade fade">
        <img src="img3.png" style="width:100%">
      </div>
      <div class="dotcontainer">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
    </div>
  <body>
<head>

现在这是我的.js文件

function showSlides() {

  var i;
  var slides = document.getElementsByClassName("image-sliderfade");
  var dots = document.getElementsByClassName("dot");

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slideIndex++;

  if (slideIndex > slides.length) {
    slideIndex = 1;
  }

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";

  setTimeout(showSlides, 4000);
}

Answer 1

  <html>
      <head>
          <link href="home.css" rel="stylesheet" type="text/css">
      </head>
      <body onload="showSlides()">

          <div class="image-sliderfade fade">
              <img src="img1.png" style="width:100%">
          </div>

          <div class="image-sliderfade fade">
              <img src="img2.png" style="width:100%">
          </div>

          <div class="image-sliderfade fade">
              <img src="img3.png" style="width:100%">
          </div>

          <div class="dotcontainer">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
         </div>



         </div>

<script type="application/javascript">
    function showSlides() { var i;

    var slides = document.getElementsByClassName("image-sliderfade");

    var dots = document.getElementsByClassName("dot");

    for (i = 0; i < slides.length; i++) {

        slides[i].style.display = "none";
    }


    slideIndex++;


    if (slideIndex > slides.length) {
        slideIndex = 1;
    }

    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }

    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";


    setTimeout(showSlides, 4000);
}
</script>
</body>
</html>

Answer 2

您已包含文件。但是，您永远不会执行所有代码所在的函数。这可能是原因。

请尝试以下操作：在jj.js的第1行上（在函数之前）编写console.log('this is jj.js');并运行页面。在控制台（Web检查器）中，您应该看到消息“ this is jj.js”，这表示脚本标记正在执行此操作。

然后删除控制台日志（您不需要它），并确保您的代码不在函数内（因此只需将其删除），或者通过执行以下操作来调用该函数：

showSlides(); function showSlides() { console.log('Init function')}

Answer 3

您可以更改第二个代码段，以便在加载页面时也执行该功能，例如：

<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>
<script>
    window.onload = function () {
        showSlides();
    }
</script>

Answer 4

您可以构建如下的自执行功能：

(function() {
    var i;
    var slides = document.getElementsByClassName("image-sliderfade");
    var dots = document.getElementsByClassName("dot");

    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }

    slideIndex++;

    if (slideIndex > slides.length) {
        slideIndex = 1;
    }

    for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" active", "");
    }

    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";

    setTimeout(showSlides, 4000);

})();

我没有测试您的功能是否有效，我只将其复制并粘贴到我的答案中。如果您使用的是jQuery，则可以在文档加载时调用它：

jQuery(document).ready(function(){

    Your function call here.....

});

Answer 5

将引用更改为

<script type="text/javascript" src="jj.js"></script>

在脚本showSlides()中的任意位置调用jj.js。例如

function showSlides(){
   //Function body goes here
}

showSlides();

但是最好将其称为onload或javascript的window.onload或jquery的$(document).ready(function(){ showSlides()})

Answer 6

<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>

您可以为此使用jQuery或纯JavaScript

// use dom elements
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        showSlides()
    }, false);   
   </script>

当初始HTML文档已完全加载并解析而无需等待样式表，图像和子帧完成加载时，将触发DOMContentLoaded事件。

 // use below function
     <script>
    (function () {
        showSlides()
     })();
     </script>

这是立即调用的函数表达式。创建后立即执行。

 // jQuery function
    <script>
    $(function() {
        showSlides()
    });
    </script>

// use window event
<script>
window.onload = function() {
    showSlides()
};
</script>

加载整个页面（包括其内容（图像，CSS，脚本等））时会触发

    <script>   
    $(document).ready( function () {
        showSlides()
    })
  </script>

当DOM准备就绪时会触发，该DOM可能早于图像和其他外部内容的加载。

在您的jj脚本中添加上述功能之一

如何从JavaScript到HTML调用函数

6 个答案: