Javascript Bug 调用函数

Question

所以，伙计们，我必须有 JS 文件，并且在头部我有这个:

<script type="text/javascript" src="./scripts/changeImage.js"></script>
<script type="text/javascript" src="./scripts/changeImageBot.js"></script>

在正文中我有这个:

<img id="myimage" onclick="changeImage()"src="./images/avatars/1.png"/>
<img id="botimage" onclick="changeImageBot()"src="./images/computer/1.png"/>

所以我的 JS 文件没问题，如果我有机器人 changeimage 和 changeimagebot，只有其中 1 个可以工作...但是如果我只在页面上放一个，它们就会工作完美..

问题是，如果我在页面加载时尝试同时使用它们..其中一个可以工作，另一个则不能工作:|如果我按下 changeImage() 函数，它会从 changeImageBot() 更改图像...看一下函数:

    var cb=0;
function changeImageBot(){
if(cb==-1){
  cb=0;
  document.getElementById('botimage').src="./images/computer/1.png";
  } else if (cb==0){
  cb=1;
  document.getElementById('botimage').src="./images/computer/2.png";
  } else if (cb==1){
  cb=2;
  document.getElementById('botimage').src="./images/computer/3.png";
  } blabla on.. 
}

var cc=0;
function changeImage(){
if(cc==-1){
  cc=0;
  document.getElementById('myimage').src="./images/avatars/1.png";
  } else if (cc==0){
  cc=1;
  document.getElementById('myimage').src="./images/avatars/2.png";
  } else if (cc==1){
  cc=2;
  document.getElementById('myimage').src="./images/avatars/3.png";
  } else if (cc==2){
  cc=3;
  document.getElementById('myimage').src="./images/avatars/4.png";
  } blalba so on
}

这些函数位于两个不同的文件中..

Answer 1

您只需要等待 DOM 完全加载即可。因为您似乎没有使用 jQuery，所以您需要使用经典的 JavaScript 方式。 Here is the documentation to get you started 。

顺便说一句:如果您使用 jQuery，这将变得非常容易。请询问您是否需要有关如何使用 jQuery 执行此操作的帮助。

UPDATE: The jQueryWay

1. 首先包括jQuery在您的页面上。
2. 从 html 中删除 onClick 事件。
3. 在您的两个 js 文件中添加以下代码并更改函数名称:

$(function() {
    $("#myimage").click(function() {
        changeImage();
    });
});

对您的两个 javascript 文件执行此操作，并相应地更改 imageID 和函数调用。

'#myimage' 是您将点击回调绑定(bind)到的图像的 ID。这与您所做的事情完全相同，只是完全由 javascript 代码完成。它还首先等待 dom 被加载。这是通过将代码包装在 $(); 函数中来完成的。

您还提到您有 140 张图像。不确定你的意思是什么，但如果你想对 100 张图像应用回调函数，你可以通过在每张图像上添加 class = 'someclass' 来实现。那么你的 jquery 代码将类似于 $('.somclass').click(..) 所以你不必依赖ID。