如何将函数从javascript调用为html_Javascript_Html

如何将函数从javascript调用为html

javascript html

如何将函数从javascript调用为html,javascript,html,Javascript,Html,当我通过不同的javascript文件链接它时，我无法调用这些函数我想把这个调用到我的HTML我该怎么做我试着添加脚本文件，但它不起作用 <html> <head> <link href="home.css" rel="stylesheet" type="text/css"> <script type="application/javascript" src="jj.js"></script> </s

当我通过不同的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);
}

函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“图像sliderfade”）；
var dots=document.getElementsByClassName（“dot”）；
对于（i=0；i幻灯片长度）{
slideIndex=1；
}
对于（i=0；i


函数showshides（）{var i；
var slides=document.getElementsByClassName（“图像sliderfade”）；
var dots=document.getElementsByClassName（“dot”）；
对于（i=0；i幻灯片长度）{
slideIndex=1；
}
对于（i=0；i

您已经包含了该文件。但是，您永远不会执行所有代码中的函数。
这可能是原因
请尝试以下操作：
在jj.js
的第1行（在函数之前）写console.log（'this is jj.js'）
并运行该页面。在您的控制台（WebInspector）中，您应该看到消息“thisisjj.js”，这意味着脚本标记正在执行它的任务
然后删除控制台日志（您不需要它），并确保您的代码不在函数中（因此只需删除它），或者通过执行以下操作来调用函数：
showSlides（）；函数showsileds（）{console.log（'Init function'）}
您可以更改第二个代码段，以便在加载页面时也执行该函数，如：
<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>
<script>
    window.onload = function () {
        showSlides();
    }
</script>


window.onload=函数（）{
放映幻灯片（）；
}
您可以构建如下自动执行函数：
(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或纯javascript来实现这一点，即
// use dom elements
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        showSlides()
    }, false);   
   </script>

//使用dom元素
document.addEventListener（'DOMContentLoaded'，function（）{
放映幻灯片（）
}，假）；

DOMContentLoaded事件在初始HTML文档完全加载和解析后激发，而不等待样式表、图像和子帧完成加载
//使用下面的函数
（功能（）{
放映幻灯片（）
})();

它是一个立即调用的函数表达式。它在创建后立即执行
//jQuery函数
$（函数（）{
放映幻灯片（）
});
//使用窗口事件
window.onload=函数（）{
放映幻灯片（）
};

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

$（文档）.ready（函数（）{
放映幻灯片（）
})

它在DOM准备就绪时触发，可以在加载图像和其他外部内容之前触发
在jj脚本中添加上述函数之一
将引用更改为
<script type="text/javascript" src="jj.js"></script>

但最好是调用它onload
javascript的窗口.onload
或jquery的$（document.ready（function（）{showsileds（）}）
调用您的showsileds（）页面加载事件上的函数，也就是说，我在代码中看不到任何地方您实际尝试调用该函数？是的，但当我用html编写该函数时，它可以工作，但我在javascript中剪切粘贴并通过src添加它不工作。最终开发人员如何通过链接.js文件来做到这一点？您的脚本可能不会被正确引用。尝试这样移动正文底部的脚本标记。这应该可以。我不想在html文件中添加函数，我只想从外部调用它。你需要加载位于正文底部的js文件并调用函数@harindersingh你说的“从外部调用”是什么意思？意思是我不想在html中添加脚本。它应该存储在.js文件中，并在那里工作“样式标记”…我想你是指脚本标签吧？但检查脚本文件是否已加载的更好方法是检查网络选项卡，并确保它没有404或该文件上的任何内容。当然，控制台也可以用于检查语法错误等，但您不需要显式的console.log来验证脚本文件是否已加载。标记完全正确，在键入时分心。我会相应地调整它。的确，现在console.log不再是最简单/推荐的方式。然而，这是一种多年来一直有效的方法，不应该被i.m.o.忘记。展示这两种不同的方法很好，但是清晰、单独的例子会有所帮助。对于外行来说，在每种情况下都不清楚上面的代码需要哪些位。
<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>

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

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

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

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

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

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

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

showSlides();