Getting elements from different html files using javascript

Question

I am trying to get an HTML element from 2 different html files. The problem is I only get one of them.

var message1 = document.getElementById("message1") works.

But when I try to do the same for the element in the other html page:

var message2 = document.getElementById("message2") it returns null

I have a main html file (index.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <p id = "message1">I hate the post office</p>
    <script src="script.js"></script>
  </body>
</html>

And I also have another html file (page2.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <p id = "message2">Random sentence</p>
    <script src="script.js"></script>
  </body>
</html>

And finally I have a javascript file (script.js):

//Gets message1 from index.html (works)
var message1 = document.getElementById("message1")
//logs message1 from index.html (works)
console.log(message1)

//gets message2 from page2.html (doesn't work)
var message2 = document.getElementById("message2")
//logs message2 from page2.html (logs null)
console.log(message2)

How do I get the elements of id message and message2 in script.js?

What do you mean by "secondary html file"? How is the secondary file included in the page? — David Knipe
– David Knipe, Commented Feb 20, 2021 at 14:26
Sorry about that, I meant another html file (edited). All 3 files listed are in one folder — Dregg
– Dregg, Commented Feb 20, 2021 at 14:30
Right, but is there anything telling the browser to download the second file and include it in the page in some way? — David Knipe
– David Knipe, Commented Feb 20, 2021 at 14:37
It's hosted on repl.it so I don't think I need to tell the browser to download the file — Dregg
– Dregg, Commented Feb 20, 2021 at 14:51

Aasai priyan · Accepted Answer · 2021-02-20 17:04:24Z

2

I try this another way using iframe. Add in index.html page

<p id="message">I hate the post office</p>
<iframe src="page2.html" frameborder="0" style="display: none;"></iframe>
<script src="script.js"></script>

edited Feb 20, 2021 at 17:04

answered Feb 20, 2021 at 15:10

Aasai priyan

425 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dregg Over a year ago

So I can't get both the elements in the same javascript file?

Aasai priyan Over a year ago

Try this @Dregg. This is the short solution.

Dregg Over a year ago

I tried this but message2 still returns null. message1 still works. Do I need to change the javascript file after adding this iframe?

Dregg Over a year ago

Nvm I tried opening it in a new tab and it worked. Thanks

Dregg Over a year ago

I'm curious though, what's the long solution?

Collectives™ on Stack Overflow

Getting elements from different html files using javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related