How to solve error when linkig one js file to multiple html files

Question

I am linkig one js file to multiple html files but getting error when I open each page the dom elements of the other pages are undefined how can I solve that please

Answer 1

Coder Lady There is a lot left to the imagination with the issue you are describing.

First let's get clarification on a few things.

1. Are all the HTML files in the same folder?

2. Is the JS file in the same folder as the HTML files?

3. Are you accessing the HTML files via a web server or directly from the file system?

In other words, does your browser address show something similar to:

a) http://localhost/file.html

or

b) file://c/pathA/pathB/file.html

4. What is the specific error message being displayed?

5. By what means are you "opening each page?"

Answer 2

"dom of other page" 👈 you cannot access "dom of other page" with frontend JavaScript.

You'll need to either

(i) Render the HTML page from backend server scripts; or

(ii) Use single page application.

Answer 3

🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ!
<script src="filename.js"></script> at the end of body tag of each html file

Answer 4

🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ! I did it and not working

Answer 5

🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ! Nothing is wrong with it when I put all the code in one html file it works properly the problem is the multiple html files

Answer 6

Gordon

Answer 7

Here is a demo of a very simple SPA for you :

https://code.sololearn.com/W80l0huYVkI5/?ref=app

Answer 8

David Carroll
1.yes all html files are in the same folder
2. Yes also the js file is in the same folder
3.I am acessing them from the file system
4. When open html file from the browser eg: index.html the console tells me that some dom elements of other html files, are undefined or null for example document.querySelector("#signup-email").value; and that is in the auth.html file
it says connot read the property value of null. When open the auth.html it says nav is not defined and nav is in the index.html file but I am writing all js in one file called script.js

Answer 9

David Carroll

Answer 10

Taste even the one that was originally working is not working properly😟

Answer 11

ooooh i didnt read it correctly, so you want to modify elements in other html. i'll propose another possible solution other than Gordon mentioned above. by using webstorage you can read it here https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API but you'll need other js for each html to check if there's change in the storage and event that need to fired according to the changes.

i vaguely remember similar thing, to alter document in another tab. i use it for cheating html game a few month back. i'll be back once i remember

UPDATE: i remember now (after a bit of researching) as you can see here https://developer.mozilla.org/en-US/docs/Web/API/Window/open window.open acfually return WindowProxy object, which you can use as window object for the other page that you're open.

let newWindow = window.open('page2.html');
newWindow.document.getElementById('page2element').value = 'value from page1';

Answer 12

Coder Lady If you can share some part of your code through Sololearn Playground then it would be easy to identify your problem otherwise we can't imagine that how you are doing.

And make sure your file path is proper.

Answer 13

Coder Lady, this sounds like you need to either put you script code at the very end of the html or start your javascript code with a document.onload() { ..... } command. Your javascript code is trying to run BEFORE the html code loads. Hope this helps!!

Answer 14

Nerb you can post it as a question and don't forget to include relevent tags java scannerclass etc

Answer 15

Hakim Kdor it is conversation section

Answer 16

Coder Lady I get flooded with notifications and just now realized you replied to my earlier questions a couple days ago. Apologies for this delay.

A simple fix would be to verify the DOM element isn't null before attempting to reference any methods or properties on a null object.

Example:
let email_input = document.querySelector("#signup-email");

let email_value = (email_input != null) ? email_input.value : "";

Be sure to share your code for closer and more actuate review.

Answer 17

How you are linking. Can you share it.

Answer 18

So there Maybe issue in your js file.

Answer 19

all of the html pages ? or the one that originally working is still working as it should but not the others ?

Answer 20

Add it before closing the body tag and check it again.