Zugriff auf 2 verschiedene HTML-Dateien aus 1 JS-Datei?

Question

Ich habe zwei HTML-Seiten und eine JS-Datei, die die Logik für beide ausführt. Wenn ich versuche, ein Bild dynamisch in einer meiner HTML-Dateien mit var mainImage = document.getElementById("lastImageID"); zu ändern, funktioniert das, aber wenn ich versuche, das gleiche für die andere HTML-Datei zu tun, tut es nicht (ich erhalte null als Ergebnis).

Ich habe "<script type="text/javascript" src="controller.js"></script>" die JS-Datei in beiden HTML-Dateien "enthalten".
Ich habe auch versucht, hier in Stack Overflow Informationen zu finden, wie man auf ein Element in einer HTML-Datei anders als mit der Notation document zugreifen kann, aber das scheint der einzig richtige Weg zu sein.
Ich habe auch überprüft und es gibt keine identischen IDs in beiden Dateien.

erster HTML-Datei (entsprechender Code):

<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> 

zweite HTML-Datei (entsprechender Code):

<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-Code:

// 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; 
} 

Der Zugriff auf die Elemente in der ersten Datei arbeiten, aber zu denen in der zweiten Datei nicht ...

Here are 4 small files I am working with

Answer 1

Try if prüft das Hinzufügen vor den Inhalt zu manipulieren:

// 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

Also ... nicht ich sehr gut verstehen. Sag mir, ob meine Erklärung deinem Problem entspricht.

I 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> 

Dann erstellt haben, ich 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> 

In myfile.js erstellt haben, habe ich das ein Stück Bild

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

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

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

Diese Weg ist dein Problem? Hier funktioniert dieser Weg beide Bilder.

Answer 3

, wenn Sie die gleiche Funktion updateImageInLastScreen() für die zweite html nennen diese Linie var mainImage = document.getElementById("mainImageId"); erhält den Wert als null (seit ‚mainImageId‘ nicht, dass es in der zweiten html ist) und die zweite Anweisung, nachdem es mainImage.src = newImage; eine Ausnahme auslöst sagen

TypeError: Cannot set property 'src' of null at updateImageInLastScreen

und stoppt die weitere Ausführung. Sie können das gleiche in F12-Konsole überprüfen.

Aber wenn Sie es von der ersten html aufrufen, dann wirft es auch eine Ausnahme für lastImage.src = newImage;, aber da es nach der kommt es wird aktualisiert.

Gemäß Ihrem Code ist es offensichtlich, dass eines der Elemente null ist, da es aus einer einzelnen HTML-Datei aufgerufen wird. Und Sie suchen blind nach der Verfügbarkeit des zweiten Elements.

Sie können dies beheben, indem Sie den Code in einem try..catch Block als

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); 
    } 
} 

setzen Sie es, hier zu arbeiten https://jsfiddle.net/hk30k20t/1/ finden