I'm trying to determine if nodeJS is a viable solution for a work project at my internship. TLDR: I need to have my basicNode.js file wait until the open('./basic.html') has actually fully opened up the browser and loaded content before it calls any other code, either from basicNode.js itself or from change.js.
End goal/purpose of basicNode.js should be to open the html, and once it's loaded, call the changeThis() function from change.js to alter the html to show "Hello" instead of "Welcome to JavaScript". I've tried mixing up the order of things or having some console.logs output current time etc before calling the change functions but I just can't seem to get open('./basic.html') to fully complete before any attempt is made to change html elements
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Date/Time: <span id="datetime"></span></p>
<p id="here">Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="changeThis()"/>
</form>
</body>
<script>
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleString();
</script>
<script type="text/javascript" src="change.js"></script>
<!--
<script>waitForElementToDisplay("#here",function(){alert("Hi");},1000,9000);</script>
-->
</html>
function changeThis() {
document.getElementById("here").innerHTML = "Hello";
}
function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
var startTimeInMs = Date.now();
(function loopSearch() {
if (document.querySelector(selector) != null) {
callback();
return;
}
else {
setTimeout(function () {
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
loopSearch();
}, checkFrequencyInMs);
}
})();
}
function sendAlert() {
alert("Hi");
}
module.exports={sendAlert};
module.exports={changeThis};
module.exports={waitForElementToDisplay};
const open = require('open');
var { change } = require('./change')
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
global.document = new JSDOM('./basic.html').window.document;
open('./basic.html');
change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000);
change.changeThis();
If you're asking why it appears that open isn't "going first," open('./basic.html') is going first, it's just an asynchronous operation and returns a Promise. This is sort of an advanced topic for someone who is new to JS and Node, but if you want to run the change script after you've definitely opened the file, you'll need to await the promise. You can read all about this in the link to MDN above, and there is a ton of material online about this topic.
const open = require('open');
var { change } = require('./change')
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
global.document = new JSDOM('./basic.html').window.document;
const main = async () => {
await open('./basic.html');
change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000);
change.changeThis();
}
main();
Note that I've wrapped the code in an async function because, for the moment, you can't use async/await syntax in the global scope. Alternatively, you could do as @JSmart523 indicated:
const open = require('open');
var { change } = require('./change')
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
global.document = new JSDOM('./basic.html').window.document;
open('./basic.html').then(() => {
change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000);
change.changeThis();
});