document.getElementById not updating

JavaScript
1

​
I’m a new user and new to JS, so please bear with me.

I have 3 files in the same folder, main.html, test.html and script.js

In my main.html, I have

script src="script.js", and <p id = "test"></p>
In my test.html, I have

script src="script.js", and <p id = "tt"></p>
In my script.js, I have a function:

 function test() {
 	document.getElementbyId("test").innerHTML = "this is in main.html"
 	document.getElementbyId("tt").innerHTML = "this is in test.html"
 {

But, when I call the function with a button, only the main.html

with id “test” is updated with “this is in main.html”, how come the

with id “tt” in test.html is not updated with “this is in test.html”?

I can provide files up on request

​

2

Everything you put here looks good, so it must be something you didn’t put here, I think?

3

Yeah it looks good to me, too. This is my code. I mostly code in Python, so the ‘eel’ stuft is just a Python package that can be used with JS.

main.html

<!DOCTYPE html>
<html>
  <head>
    <title>SCA Checklist</title>
    <script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript" src="/script.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <table class="table table-borderless">
	  <tr class="title">
	    <td colspan="2">SCA Warehouse Checklist</td>
	  </tr>
	  <tr>	    
	    <td class="menu" width="50%" id="menu_table"><img src="icons/home.png"></img><a href="#none" onclick=reset_view()>&nbsp&nbsp&nbsp&nbsp&nbspHome</a></td>
	    <td class="right-menu" rowspan="6"><iframe id="data" width="100%" height="100%" src="home.html" scrolling="no"></iframe></td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/aeriallift.png"><a href="#none"></img>&nbsp&nbsp&nbsp&nbsp&nbspAerial Lifts</td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/mower.png"></img>&nbsp&nbsp&nbsp&nbsp&nbspLawn Equipment</td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/lift.png"></img>&nbsp&nbsp&nbsp&nbsp&nbspLift Trucks</td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/Inventory.png"></img>&nbsp&nbsp&nbsp&nbsp&nbspInventory</td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/about.png"></img>&nbsp&nbsp&nbsp&nbsp&nbsp<a href="#none" onclick=show_about()>About</a></td>
	  </tr>
</table>
<div>
	<p id="test">This is from main.html</p>
	<input type="submit" name="" onclick="dummy()"></input>
<div>
  </body>
</html>

test.html

<html>
<head>
	<script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript" src="/script.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p id="tt">This is p tag in test.html</p>
</body>
</html>

script.js

function dummy() {
	u = document.getElementById("test").innerHTML
	f = eel.dummy(u)
	document.getElementById("data").src = "test.html"
	document.getElementById("menu_table").width='25%'
	showdir()
}

async function showdir() {
	t = await eel.showdir()()
	document.getElementById("test").innerHTML = t
	alert(t)
}
4

When I put the button on the “test” page, it worked from there. I think the issue is that you can’t change a different document (index and test are different documents) using this kind of function.

Are you getting this same message in the console?

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at dummy (script.js:5)
    at HTMLInputElement.onclick (index.html:13)
dummy @ script.js:5
onclick @ index.html:13
5

Yes, so this is impossible to do? Any work around or solution? I read about something called localStorage, and I think I can use that, but not sure how.

6

localStorage is cool, but it’s more like a type of cookie, where the particular document can store something on it. Unfortunately, I’m pretty sure the other documents can’t access it.

Another thing sort of related is the XMLHttpRequest object, where the document can read information from other pages, but again we have the problem where it can’t affect other pages.

I’m kind of a newb, but AFAIK you need to get into the server side of things to do other stuff, so PHP or NodeJS or maybe you can send something to your Python app?

7

this will fix it …

function dummy() {
        var el;
 	if(el=document.getElementById("test"))el.innerHTML = "this is in main.html";
 	if(el=document.getElementById("tt"))el.innerHTML = "this is in test.htm";
}