'reflecting a variable change instantly from javascript file to html without page refresh

the variables in a separate JavaScript file gets updated from another source and I need to see the changes in an html page. I need to see the changes without pressing a button or refreshing the page. the way I test it , is 1- opening the html file. 2- by changing the values in the module1.js file and saving it and the changes should be applied in the opened html file.

//this is the code in a seperate javascript file
// variables auto update from another source
//the file name is module1.js
var Student =
{
    name : "ABC",
    age : 18,
    dept : "CSE",
    score : 90
};
<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="module1.js">
    </script>
</head>
  
<body>
    <button onclick="f()">
        Click Me To Get Student Details
    </button>
  
    <div>
        <p id="text" style="color:purple; 
            font-weight:bold;font-size:20px;">
        </p>
    </div>
  
    <script type="text/javascript">
        function f() {
            var name = Student.name;
            var age = Student.age;
            var dept = Student.dept;
            var score = Student.score;
  
            var str = "Name:" + name + "\nAge: "
                + age + "\nDepartment:" + dept 
                + "\nScore: " + score;
  
            document.getElementById(
                'text').innerHTML = str;
        }
    </script>
</body>
  
</html>

with the code above the values change only after refreshing the page. i want to change them dynamically without page refresh

javascripthtmldynamic-programmingpage-refresh


Solution 1:[1]

Try this

It refreshes the script every 10 seconds

//this is the code in a separate javascript file
// variables auto update from another source
//the file name is module1.js
const Student = {
  name: "ABC",
  age: 18,
  dept: "CSE",
  score: 90
};

// code in page
const loadJS = () => {
  let srcTag = document.getElementById("moduleScript");
  srcTag.remove();
  let script = document.createElement('script');
  script.id = "moduleScript";
  script.src = `module1.js?rnd=${new Date.getTime()}`
  document.querySelector('head').appendChild(script);
};


const fill = () => {
  if (!Student) return;
  var name = Student.name;
  var age = Student.age;
  var dept = Student.dept;
  var score = Student.score;

  document.getElementById('text').innerHTML = `Name: ${name}<br/>
      Age: ${age}<br/>
      Department: ${dept}<br/>
      Score: ${score}`;
  loadJS(); // get a new one
};

window.addEventListener("DOMContentLoaded", function() {
  fill()
  setInterval(() => fill(), 10000); // load every 10 seconds
  document.getElementById("getDetails").addEventListener("click", fill);
})

#text {
  color: purple;
  font-weight: bold;
  font-size: 20px;
}

<script src="module1.js" id="moduleScript"></script>
<button id="getDetails">Click Me To Get Student Details</button>

<div>
  <p id="text"></p>
</div>

Solution 2:[2]

this is the code in an html page that does the job. everything in another page named "test.html" gets updated without refresh every 1000 ms.

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>auto update page</h2>
</div>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "test.htm", true);
  xhttp.send();
}
setInterval("loadDoc()", 1000);
</script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mplungjan
Solution 2 hm741

Related Questions