0

I have two HTML files index.html and display.html with their respective JS files index.js and display.js. I export an object person and updated the object property person.marks upon click event within index.js . I realize that display.js will import the original value of person.marks and the property is updated at a later time on clicking. However, is it possible to access the updated values and display them on the new HTML page through display.js . Do I need to use Promises or other concepts of javascript?

Within index.html

<body>
    <p id="here">Click Here</p>
    <script type="module" src="index.js"></script>
</body>

Within index.js

export let person = { name:"Ranger" , marks: 23};
var s = document.getElementById("here");
if(s){
    s.addEventListener('click',update);
}
function update(){    
    person.marks = person.marks + 10;
    console.log('Updated value in original file ' , person.marks);
}

Within display.html

<body>
    <p>The updated value is: </p>
    <p id="updatedVal"></p>
    <script type="module" src="display.js"></script>
</body>

Within display.js

import { person } from './index.js';
document.getElementById("updatedVal").innerHTML = person.marks; //But this gives the original value
S. Hesam
  • 5,266
  • 3
  • 37
  • 59
KevaurnJeams
  • 1
  • 1
  • As far as I know, there's no easy way to do this in vanilla JS. There are some answers suggesting using [jQuery](https://stackoverflow.com/a/12899097/8943850), or some tricks [here](https://stackoverflow.com/a/7493724/8943850). – Duc Nguyen Jun 12 '20 at 08:22
  • 1
    Thank you for the links. The other pages cleared up some doubts. I should have searched more thoroughly. – KevaurnJeams Jun 12 '20 at 09:29

0 Answers0