Question

我有两个HTML页面和一个JS文件，它们为两者做了逻辑。当我尝试使用var mainImage = document.getElementById("lastImageID");在我的一个HTML文件中动态更改图像时，这可行，但是当我尝试对其他HTML文件执行相同操作时，它不会（因此我收到null）

我在两个HTML文件中“包含”了<script type="text/javascript" src="controller.js"></script> JS文件。
我还尝试在Stack Overflow中查找信息，如何访问HTML文件中的元素而不是使用document符号，但似乎这是唯一正确的方法我也检查了两个文件中没有相同的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;
}

对第一个文件中的元素的访问工作，但对第二个文件中的元素的访问不起作用......

Here are 4 small files I am working with

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 （，因为'mainImageId'不在第二个html ）和它之后的第二个语句mainImage.src = newImage;抛出一个异常说

TypeError：无法设置null的属性'src' 在updateImageInLastScreen

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

但是当你从第一个html中调用它时，它也会引发lastImage.src = newImage;的异常，但是因为它在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/

找到它

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

3 个答案: