Javascript 我可以在一个html页面中包含两个外部.js脚本吗？

我有两个不同的函数，我想在同一个html页面上工作。他们都在更改两个不同的图像onclick。我将javascript保存在一个外部文件中。调用.js文件的脚本位于html的头部，尽管我在正文中也尝试了，但没有成功

以下是html代码：

<img id="avoir" onclick="changeImage()" src="images/avoir.gif" width="700" height="394">
<img id="aller" onclick="changeImage()" src="images/aller.gif" width="700" height="394">

对于第二个图像：

$(document).ready(function changeImage() {
  if (image.src.match("avoirchart")) {
    image.src = "images/avoir.gif";
  } else {
    image.src = "images/avoirchart.gif";
  }
}

我是一名网络开发专业的学生，对javascript不太熟悉。当前发生的情况是，第二个图像在单击时发生更改，而第二个图像没有发生任何变化。

---

谢谢您的建议。

两个代码块看起来完全相同。如果它们的目标是单独的元素，则不应使用相同的目标ID。ID应始终是唯一的。如果要为两个单独的元素使用相同的标识符，则应以特定性为目标，并且可以在父容器上使用ID，否则应使用类或其他目标方法

您可能还希望使用它来帮助您避免任何潜在的jQuery冲突

jQuery ( document ).ready ( function ( $ ) {

无论您是将其切换为上述内容，还是继续使用现有内容，都应使用a）关闭最后一行；在你的}

这应该让你开始

jQuery ( document ).ready ( function ( $ ) {
    var image = document.getElementById('aller');

    if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
    } else {
        image.src = "images/allerchart.gif";
    }
});

---

您可以加载多个外部JS脚本。但是如果他们试图定义相同的全局函数，最后一个将替换前面的函数定义的函数——只有一个函数具有给定的名称

定义函数的语法错误。您应该将函数定义放在顶层，而不是放在

$（document.ready（）

）中。您编写的内容称为命名函数表达式。它定义了一个函数，但名称的范围仅在函数体中，全局不可见

您应该为函数指定不同的名称，例如

changeAvoir

和

changeAller

。或者您应该在一个

.js

文件中定义一个函数，并让它接受一个参数：

function changeImage(image) {
    if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
    } else {
        image.src = "images/allerchart.gif";
    } 
}

然后，您的HTML将如下所示：

<img id="avoir" onclick="changeImage(this)" src="images/avoir.gif" width="700" height="394">
<img id="aller" onclick="changeImage(this)" src="images/aller.gif" width="700" height="394">

这就是所谓的DRY原则：不要重复你自己。当你看到有多个代码遵循一个模式时，你应该将该模式抽象为一个函数或循环。每个案例的不同特征可以来自一个模式或一个数据收集（数组或对象）。

图像标签更改

第一个脚本文件

$(document).ready(function(){

    function changeImageAvoir() {
      var image = document.getElementById('aller');
      if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
      } else {
        image.src = "images/allerchart.gif";
   } 

   //This will call the function on the click event   
   $(document).on('click','#avoir', null, changeImageAvoir);

}();}

$(document).ready(function(){

    function changeImageAller() {
      var image = document.getElementById('aller');
      if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
      } else {
         image.src = "images/allerchart.gif";
      }
   //This will call the function on the click event
   $(document).on('click','#aller', null, changeImageAller); 

}();}

第二个脚本文件

$(document).ready(function(){

    function changeImageAvoir() {
      var image = document.getElementById('aller');
      if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
      } else {
        image.src = "images/allerchart.gif";
   } 

   //This will call the function on the click event   
   $(document).on('click','#avoir', null, changeImageAvoir);

}();}

$(document).ready(function(){

    function changeImageAller() {
      var image = document.getElementById('aller');
      if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
      } else {
         image.src = "images/allerchart.gif";
      }
   //This will call the function on the click event
   $(document).on('click','#aller', null, changeImageAller); 

}();}

函数调用基本上将代码保留在私有范围内。函数的

on

将单击事件分配给图像标记。这是一种非侵入性编码，可以使HTML更干净

如果您真的想变得圆滑，可以在函数调用中添加一个参数来接收图像句柄，这样就不必使用getElementById

---

此外，如果将函数调用设为泛型，则可以传入要查找的匹配值以及真假条件，这样您就只有一个函数。然后，您可能只需要一个文件。

许多网页加载几十个外部脚本。但是，您只能有一个名为

changeImage

的全局函数。以及您的系统ntax根本没有定义全局函数。首先：从页面内的脚本开始，然后，当它工作时，将其拆分为一个单独的文件。然后回答问题：为什么我需要两个文件？然后，在那之后不久，回答问题：为什么我没有查看web上几乎任何页面的源代码来解决如何回答我自己的请求ion？为函数提供一个参数确实会有帮助。很好的调用！