如何从1个JS文件访问2个不同的HTML文件？

Question

我有两个HTML页面和一个JS文件，这两个文件都符合逻辑。 当我尝试使用var mainImage = document.getElementById("lastImageID");在我的HTML文件中动态更改图片时var mainImage = document.getElementById("lastImageID"); 这行得通，但是当我尝试对其他HTML文件执行相同的操作时，它却没有（结果是我收到null）。

我已经在两个HTML文件中“包含”了<script type="text/javascript" src="controller.js"></script> JS文件。
我还尝试在Stack Overflow的此处查找信息，而不是使用document表示法来访问HTML文件中的元素，但这似乎是唯一正确的方法。
我还检查了两个文件中没有相同的ID。

第一个HTML文件（相关代码）：

<div class="thumbnail">
  <img id="mainImageId" src="img/decision.jpg"
       alt="Decision">
</div>
<div class="textMessage">
  <div id="messageToUserID" class="infoText">   
    <h5>some text</h5>
  </div>
</div>

第二个HTML文件（相关代码）：

<div class="thumbnail">
  <img id="lastImageID"
       src="img/congratulations.jpg"
       alt="Decision">
</div>
<div class="textMessage">
  <div id="lastMessageToUserID" class="infoText">
    <h5>some text</h5>
</div>

JavaScript代码：

// A function, which receives an new image, and updates the main image of the simulation by it.
function updateImageInLastScreen(newImage){
    var mainImage = document.getElementById("mainImageId");
    mainImage.src = newImage;
    var lastImage = document.getElementById("lastImageID");
    lastImage.src = newImage;
}


// A function, which receives an new message, and updates the main message of the simulation by it.
function updateMessageInLastScreen(newMessageToUser){
    var mainMessageToUser = document.getElementById("messageToUserID");
    messageToUserID.innerHTML = newMessageToUser;
    var lastMessageToUser = document.getElementById("lastMessageToUserID");
    lastMessageToUser.innerHTML = newMessageToUser;
}

对第一个文件中的元素的访问有效，但对第二个文件中的元素的访问则无效...

这是我正在使用的4个小文件

Answer 1

尝试在操作内容之前添加if检查：

 // A function, which receives an new image, and updates the main image of the simulation by it. function updateImageInLastScreen(newImage){ var mainImage = document.getElementById("mainImageId"); if (mainImage) { mainImage.src = newImage; } var lastImage = document.getElementById("lastImageID"); if (lastImage) { lastImage.src = newImage; } } // A function, which receives an new message, and updates the main message of the simulation by it. function updateMessageInLastScreen(newMessageToUser){ var mainMessageToUser = document.getElementById("messageToUserID"); if (mainMessageToUser) { messageToUserID.innerHTML = newMessageToUser; } var lastMessageToUser = document.getElementById("lastMessageToUserID"); if (lastMessageToUser) { lastMessageToUser.innerHTML = newMessageToUser; } } 

Answer 2

所以...我不太了解。 告诉我我的解释是否等于您的问题。

我已经创建了page1.html

<h1>Image 1</h1>
<img src="" alt="image one" style="width:304px;height:228px;" id="image1">
<script src="myfile.js" type="text/javascript"></script>

然后，我创建了page2.html

<h1>Image 2</h1>
<img src="" alt="image two" style="width:304px;height:228px;" id="image2">
<script src="myfile.js" type="text/javascript"></script>

在myfile.js中，我将一张图片

var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2'); 

if( image1) image1.src = 'image.jpg';   

if( image2 ) image2.src = 'image.jpg';  

这是你的问题吗？ 在这里，这种方式可以处理两个图像。

Answer 3

当您为第二个html调用相同的函数updateImageInLastScreen() ，此行var mainImage = document.getElementById("mainImageId"); 获取值为null （ 因为第二个html中没有'mainImageId' ）以及它之后的第二条语句mainImage.src = newImage; 抛出一个异常的说法

TypeError：无法在updateImageInLastScreen上将属性'src'设置为null

并停止进一步执行。 您可以在F12控制台中进行验证。

但是，当您从第一个html调用它时，还会为lastImage.src = newImage;抛出异常lastImage.src = newImage; 但由于它在mainImage之后， mainImage它正在更新。

根据您的代码，很明显，任何一个元素都将为null，因为它是从单个html文件中调用的。 并且您在盲目地寻找第二个元素的可用性。

您可以通过将代码放入try..catch块中来克服此问题

function updateImageInLastScreen(newImage){
    try{
        var mainImage = document.getElementById("mainImageId");
        mainImage.src = newImage;
    }
    catch(e){
        console.log(e);
    }

    try{
        var lastImage = document.getElementById("lastImageID");
        lastImage.src = newImage;
    }
    catch(e){
        console.log(e);
    }
}

您可以在这里找到它工作https://jsfiddle.net/hk30k20t/1/