堆棧內存溢出
  簡體   English   中英

如何從javascript調用函數到html

[英]how to call a function from javascript to html

 原文  2019-04-30 07:23:07  1   6    javascript/ html

問題描述

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

6 個解決方案

解決方案1
 1  2019-04-30 07:30:03

  <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>

解決方案2
 1  2019-04-30 07:30:29

您已包含該文件。 但是，您永遠不會執行所有代碼所在的函數。這可能是原因。

嘗試以下操作：在jj.js第 1 jj.js （在函數之前）寫console.log('this is jj.js'); 並運行頁面。 在您的控制台（網絡檢查器）中，您應該看到消息“這是 jj.js”，這意味着腳本標記正在執行它的操作。

然后刪除控制台日志（您不需要它）並確保您的代碼不在函數內（因此只需刪除它）或通過執行以下操作來調用該函數：

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

解決方案3
 1  2019-04-30 07:32:05

您可以更改第二個代碼片段以在頁面加載時也執行該功能，例如：

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

解決方案4
 1  2019-04-30 07:33:23

您可以像這樣構建一個自執行函數：

(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.....

});

解決方案5
 0  2019-04-30 07:40:30

<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>

DOMContentLoaded 事件在初始 HTML 文檔完全加載和解析后觸發，無需等待樣式表、圖像和子框架完成加載。

 // 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 准備好時觸發，這可以在加載圖像和其他外部內容之前。

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

解決方案6
 0  2019-04-30 08:00:15

將您的參考更改為

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

在腳本jj.js任何地方調用你的showSlides() 。 例如

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

showSlides();

但最好是把它onload無論是JavaScript的window.onload或jQuery的$(document).ready(function(){ showSlides()})

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何從html調用javascript函數？ 如何從HTML表格中調用JavaScript函數 如何從HTML調用JavaScript函數 如何從HTML調用JavaScript函數？ 從HTML調用JavaScript函數 如何從html文檔中調用其他函數中的函數--JavaScript。 Rails：如何在render：pdf中從HTML調用Javascript函數 如何從Chrome擴展程序中的html按鈕調用javascript函數？ 如何從html中的href標簽調用javascript函數？ 如何在Node.JS中從HTML調用函數到Javascript文件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM