外部Javascript文件：＆＃34; photogallery.js＆＃34;

Question

我在JavaScript的功能中嵌套了函数，我想在我的html代码的主函数photoGallery（）中调用它，但是没有用。哪里我错了？

JavaScript：

function photoGallery1() {

    kartinki = new Array('images/green_salad1.png', 'images/green_salad2.png', 'images/green_salad3.png');
        index = 0;

    function next() {
        index++;
        if ( index >= kartinki.length) index = 0; 
        document.getElementById('image2').src = kartinki[index];
    }

    function previous() {
        index--;
        if ( index < 0) index = kartinki.length -1; 
        document.getElementById('image2').src = kartinki[index];
    }

    function start() {
        index = 0;  
        document.getElementById('image2').src = kartinki[index];
    }
}

HTML代码：

<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width">
        <meta charset="utf-8">

        <title>The right eating of employed people</title>

        <link rel='stylesheet' media='screen and (max-width: 1000px)' href='css/narrow.css'/>
        <link rel='stylesheet' media='screen and (min-width: 1001px) and (max-width: 1235px)' href='css/medium.css' />
        <link rel='stylesheet' media='screen and (min-width: 1236px)' href='css/wide.css' />
        <link rel="stylesheet" href="css/calendarview.css">
        <script src="js/photogallery.js"></script> 
        <script src="js/prototype.js"></script>
        <script src="js/calendarview.js"></script>
        <script type="text/javascript">
         window.onload = function() {
            Calendar.setup({
              parentElement : 'calendar'
            })
          window.onload = photoGallery1()
          }
        </script>

Answer 1

我认为这就是你想要的。 window.onload回调中的window.onload = photoGallery1（）对我来说毫无意义。

window.onload = function() {
  Calendar.setup({
    parentElement : 'calendar'
  });
  photoGallery1();
}

当window.onload事件触发时，这将调用photoGallery1（）函数。但是，您的脚本存在很多问题。有很多事情需要改进。

Answer 2

首先，您将执行的photoGallery1（）函数分配给window.onload，所以基本上是photoGallery1（）的结果。您需要自己分配函数：

 window.onload = photoGallery1;

在你的函数photoGallery1（）中，没有执行或返回的函数。当我们引用范围时，它意味着可以从中看到某些函数和变量。

如果您查看photoGallery1中的功能，它们都在photoGallery1的范围内，无法从外部范围访问或执行。

一种可能的解决方案是：

function photoGallery1() {

    function start() {
     // do your things
    }

    // invoke function
    start();
}
window.onload = photoGallery1;

另一种方法是通过返回您需要的一些功能来揭露您的一些功能：

function photoGallery1() {
    function start() {
     // do your things
    }
    function next(){};
    function previous(){};
    return {
         start: start,
         next: next,
         previous: previous
    }
}

// Execute your functions
var photoGallery = photoGallery1();
window.onload = photoGallery.start;

Answer 3

首先：

window.onload = photogallery1();

undefined属性的window.onload值。

正如@ mrbinky3000所说，你需要在你的onload事件处理程序中调用photogallery1（）。

此外，您需要一个具有公共方法的对象，以便可以从外部作用域访问它，在这种情况下，您需要一个构造函数：

function Photogallery() {
    // Don't forget the "var" directive to prevent these from being global
    var kartinki = new Array('images/green_salad1.png', 'images/green_salad2.png', 'images/green_salad3.png');
    var index = 0;

    this.next = function () {
        index++;
        if ( index >= kartinki.length) index = 0; 
        document.getElementById('image2').src = kartinki[index];
    }

    this.previous = function () {
        index--;
        if ( index < 0) index = kartinki.length -1; 
        document.getElementById('image2').src = kartinki[index];
    }

    this.start = function () {
        index = 0;  
        document.getElementById('image2').src = kartinki[index];
    }
}

现在你的onload变化了一点：

var photoGallery = null;

window.onload = function () {
    // the other stuff you had
    photoGallery = new Photogallery();
}

不要忘记声明photoGallery变量以避免它成为implicitly declared global variable。

现在用一个小HTML来调用对象上的方法：

<button type="button" onclick="photoGallery.next()">Next</button>
<button type="button" onclick="photoGallery.previous()">Previous</button>

Answer 4

应该实例化

photoGallery1()

var Gallery = new photoGallery1();

您在photoGallery1()正文中声明的函数是私有的，因此您必须将它们附加到photoGallery1内的事件。

您可以将函数看作Class和Constructor。所以相应地使用它。

Answer 5

我不完全确定你要完成的是什么，但如果它是像我的常识那样的照片库，那么这三件事可能有所帮助。

从示例中删除任何多余的信息，因为它会混淆您尝试解决的问题。（例如，calendar.js和CSS样式表调用）。这将允许其他人以更有效的方式帮助您。
将您的功能与表单分开。一般来说，将HTML严格用于网页/应用程序的骨架并保持骨架的功能（功能页面）是一种好习惯。 / app可以在javascript中。这在我的例子中得到了证明。
不要使用嵌套功能，而是尝试转动＆＃34;照相馆＆＃34;进入一个对象并分配＆＃34; next＆＃34;，＆＃34; previous＆＃34;，＆＃34; start＆＃34;适当事件的方法。（在我的例子中，我分配了＆＃34;下一个＆＃34;和＆＃34;按钮之前和＃34;开始＆＃34;到window.onload）

外部Javascript文件：＆＃34; photogallery.js＆＃34;

    /*
     * Wrapping code in an iife is always good practice to prevent the pollution of the global 
     * name space.
     */
    (function(){
    /* 
     * Declare your array of images and index outside of the photoGallery1 object so the
     * methods of photoGallery1 can cleanly reference them before photoGallery1 is initialized 
     * in the global execution context
     */
    var kartinki =   ['images/green_salad1.png', 'images/green_salad2.png', 'images/green_salad3.png'];
    var index = 0;

    var photoGallery1 =  {
       next:  function (){
          index++;
          /* 
           * Here the index will never be greater than kartinki.length so check against 
           * (kartinki.lenghth - 1) or use index == kartinki.length
           */
          if (index > (kartinki.length - 1)) { index = 0 };
          document.getElementById('image2').src = kartinki[index];
        },

       previous: function() {
          index--;
          if ( index  < 0) { index = kartinki.length - 1 };
          document.getElementById('image2').src = kartinki[index];
       },

       start: function() {
          document.getElementById('image2').src = kartinki[index];
       }
    }

    /* 
     * Do the below inside an external javascript file rather than the html you can set the 
     * window object's onload property to an anonymous function, in which you can call any 
     * functions you want to happen when the page loads (i.e. photoGallery1.start() is called).
     */
    window.onload = function(){
       photoGallery1.start()
    }
    //Setting the "next" and "previous" methods to there corresponding buttons
    document.getElementById('prev').onclick = photoGallery1.previous
    document.getElementById('next').onclick = photoGallery1.next
    })()

HTML文件：＆＃34; index.html＆＃34;

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>The right eating of employed people</title>
       </head>
       <body>
          <img id="image2">
          <button id="prev">Previous</button> <button id="next">Next</button>
          <!-- Add the script tag at the bottom of the body so the browser can render the  
          html elements referenced in photogallery.js before they are needed. If you don't do
          this document.getElementById("image2") will return null, as it has not been created 
          at the time of photogallery.js's execution.
          -->
          <script src="/photogallery.js"></script>
       </body>
    </html>

如果您有任何疑问，请不要犹豫！：d

Answer 6

如果我有，你想要在调用photoGallery1（）时调用photoGallery1（）中的3个函数。如果是重点，请在关闭之前调用它们。

function photoGallery1() {

    kartinki = new Array('images/green_salad1.png', 'images/green_salad2.png', 'images/green_salad3.png');
        index = 0;

    function next() {
        index++;
        if ( index >= kartinki.length) index = 0; 
        document.getElementById('image2').src = kartinki[index];
    }

    function previous() {
        index--;
        if ( index < 0) index = kartinki.length -1; 
        document.getElementById('image2').src = kartinki[index];
    }

    function start() {
        index = 0;  
        document.getElementById('image2').src = kartinki[index];
    }

    next();
    previous();
    start();
}

Answer 7

感谢大家的帮助和提示！ :)已经工作正常，我想要的！最后我发布了最终的代码。 HTML：

<!Doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta name="viewport" content="width=device-width">
            <meta charset="utf-8">

            <title>Правилното хранене на заетите хора</title>

            <link rel='stylesheet' media='screen and (max-width: 1000px)' href='css/narrow.css'/>
            <link rel='stylesheet' media='screen and (min-width: 1001px) and (max-width: 1235px)' href='css/medium.css' />
            <link rel='stylesheet' media='screen and (min-width: 1236px)' href='css/wide.css' />
            <link rel="stylesheet" href="css/calendarview.css">
            <script src="js/photogallery.js"></script> 
            <script src="js/prototype.js"></script>
            <script src="js/calendarview.js"></script>
            <script type="text/javascript">
              window.onload = function() {
                Calendar.setup({
                  parentElement : 'calendar'
                })
                photoGallery = new Photogallery();
              }
            </script>
           <body>
           ......
           <p id="photogallery">
           <a href="javascript:void(0)" class="prev" onclick="photoGallery.previous()"><img src="images/prev.png" border="0"></a><a href="javascript:void(0)"><img src="images/home.png" border="0" onclick="photoGallery.start()"></a><a href="javascript:void(0)" class="next" onclick="photoGallery.next()"><img src="images/next.png" border="0"></a>
           </p>
           ....
           </body>
    </html>

JavaScript代码：

function Photogallery() {

    var kartinki = new Array('images/green_salad1.png', 'images/green_salad2.png', 'images/green_salad3.png');
    var index = 0;

    this.next = function () {
        index++;
        if ( index >= kartinki.length) index = 0; 
        document.getElementById('image2').src = kartinki[index];
    }

    this.previous = function () {
        index--;
        if ( index < 0) index = kartinki.length -1; 
        document.getElementById('image2').src = kartinki[index];
    }

    this.start = function () {
        index = 0;  
        document.getElementById('image2').src = kartinki[index];
    }
}

var photoGallery = null;

window.onload = function () {
    photoGallery = new Photogallery();
}

如何将我的JS主要功能调用到我的html中？

7 个答案:

外部Javascript文件：＆＃34; photogallery.js＆＃34;

HTML文件：＆＃34; index.html＆＃34;