Why my function middleContainer is undefine - JS modulesDetecting an undefined object propertyIs there an “exists” function for jQuery?How to check empty/undefined/null string in JavaScript?var functionName = function() vs function functionName() How to determine if variable is 'undefined' or 'null'?Why does Google prepend while(1); to their JSON responses?How to check for “undefined” in JavaScript?Is there a standard function to check for null, undefined, or blank variables in JavaScript?Why does HTML think “chucknorris” is a color?Cannot display HTML string

As a supervisor, what feedback would you expect from a PhD who quits?

Was it ever illegal to name a pig "Napoleon" in France?

What do you call a situation where you have choices but no good choice?

Did William Shakespeare hide things in his writings?

Is conquering your neighbors to fight a greater enemy a valid strategy?

How do resistors generate different heat if we make the current fixed and changed the voltage and resistance? Notice the flow of charge is constant

In layman's terms, does the Luckstone just give a passive +1 to all d20 rolls and saves except for death saves?

What was the nature of the known bugs in the Space Shuttle software?

Custom Geolocation Fields not populating in test class

How do I explain that I don't want to maintain old projects?

Does anyone have a method of differentiating informative comments from commented out code?

How do I talk to my wife about unrealistic expectations?

QR codes, do people use them?

What does the multimeter dial do internally?

Taking my Ph.D. advisor out for dinner after graduation

Function that detects repetitions

Can one block with a protection from color creature?

Array or vector? Two dimensional array or matrix?

Will Jimmy fall off his platform?

How does the cloaker's Phantasms action work?

Users forgotting to regenerate PDF before sending it

Intern not wearing safety equipment; how could I have handled this differently?

Why do Martians have to wear space helmets?

What are the consequences for a developed nation to not accept any refugee?

Why my function middleContainer is undefine - JS modules

Detecting an undefined object propertyIs there an “exists” function for jQuery?How to check empty/undefined/null string in JavaScript?var functionName = function() vs function functionName() How to determine if variable is 'undefined' or 'null'?Why does Google prepend while(1); to their JSON responses?How to check for “undefined” in JavaScript?Is there a standard function to check for null, undefined, or blank variables in JavaScript?Why does HTML think “chucknorris” is a color?Cannot display HTML string

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

I tested my JS code with Node and the import keyword gets flagged. I have read and watch videos on how to import vars,etc from other JS files.

I believe my syntax is correct, but I do not understand why it does not work properly.

Here is my HTML code:

<!DOCTYPE html>

<html>

 <head>
 <title>JAPC</title>

 <meta charset="utf-8"/>

 <!-- CSS -->
 <link rel="stylesheet" type="text/css" href="./CSS/page_structure.css">
 <link rel="stylesheet" type="text/css" href="./CSS/navstack_structure.css">
 <link rel="stylesheet" type="text/css" href="./CSS/jpdc_structure.css">
 <link rel="icon" href="./Images/Page_Imgs/favicon-16x16.png">

 <!-- JS -->
 <script type="module" src="./JS/page_structure.js"> </script>

 </head>

 <body onload="middleContainer()">
 <div> <!--DIV 1-->
 <div id="top_container">
 <!--DIV 1.1 | Header-->
 <h1>Header</h1>
 </div>
 <!-- --------------------- -->
 <div id="middle_container">
 <!--DIV 1.2 | Body-->
 </div>
 <!-- --------------------- -->
 <div id="bottom_container">
 <h1>Footer</h1>
 </div>
 </div>
 </body>
</html>

Here is my JS code:

/*
 Page Structure
*/
import top_container_config, middle_container_config, bottom_container_config from './page_structure_config.js';

//------------------------------------------------------------------------------

function createDOMelement(element_, attributues_)
 var elem_ = document.createElement(element_);
 var k;
 for (k in attributues_)
 elem_.setAttribute(k,attributues_[k]);
 
 return elem_;


//------------------------------------------------------------------------------
function topConainter()
 var _container = "top_container";



//------------------------------------------------------------------------------

function middleContainer()
 var _container_ID = "middle_container";
 var _columns = [];
 var _navVar;
 var _nv_items =[];

 //Columns
 for(var col = 0; col < middle_container_config.mc_columns.num; col++)
 _columns.push(createDOMelement("div",middle_container_config.mc_columns._DOM_));
 

 //My Nav Var
 _navVar = createDOMelement("div", middle_container_config.nav_stack._DOM_);

 //Inside my Nav Var
 for(var nv_i = 0; nv_i < middle_container_config.nav_stack_items.num; nv_i++)
 _nv_items.push(createDOMelement("div",middle_container_config.nav_stack_items._DOM_));
 


 //JOIN ALL ELEMENT - Inside OUt
 for (var a =0; a<_nv_items.length; a++)
 _navVar.appendChild(_nv_items[a]);
 

 //Append NavVar to first column of the middle_container
 _columns[0].appendChild(_navVar);

 //add to DOM
 for(var b=0; b<_columns.length; b++)
 document.getElementById(_container_ID).appendChild(_columns[b]);
 

 console.log(document.getElementById(_container_ID));



//------------------------------------------------------------------------------

function bottomContainer()
 var _container = "bottom_container";

Here is picture of my Node output:

I run my node command as the following:

node page_structure.js

enter image description here

edited Mar 26 at 11:19

asked Mar 25 at 21:28

Andy

817 bronze badges

1

just curious, why do you think npm run sourceFile.js would get it working?

– Tsuna
Mar 25 at 21:33

@Tsuna, interesting I had the idea that "npm run" would execute my JS code but as Petr below mentions node is the command that does it. Thank you. I would edit the question with the proper command.

– Andy
Mar 25 at 21:39

guess you mixed up npm with node haha. It's good that you don't get them mixed up

– Tsuna
Mar 25 at 21:43

Your code is not does not reflect a code for node application but rather reflect a code for web application. I think what you are looking for is to import page_structure.js in your index.html. You don't need to run node application for frontend script.

– Dakota Jang
Mar 25 at 22:24

@DakotaJang, I understand, however I though node would parse my JS file and let me know of any errors like the import keyword. Also, I'm calling my JS file in my HTML file in the <script> tag.

– Andy
Mar 25 at 22:29

|
show 5 more comments

I tested my JS code with Node and the import keyword gets flagged. I have read and watch videos on how to import vars,etc from other JS files.

I believe my syntax is correct, but I do not understand why it does not work properly.

Here is my HTML code:

<!DOCTYPE html>

<html>

 <head>
 <title>JAPC</title>

 <meta charset="utf-8"/>

 <!-- CSS -->
 <link rel="stylesheet" type="text/css" href="./CSS/page_structure.css">
 <link rel="stylesheet" type="text/css" href="./CSS/navstack_structure.css">
 <link rel="stylesheet" type="text/css" href="./CSS/jpdc_structure.css">
 <link rel="icon" href="./Images/Page_Imgs/favicon-16x16.png">

 <!-- JS -->
 <script type="module" src="./JS/page_structure.js"> </script>

 </head>

 <body onload="middleContainer()">
 <div> <!--DIV 1-->
 <div id="top_container">
 <!--DIV 1.1 | Header-->
 <h1>Header</h1>
 </div>
 <!-- --------------------- -->
 <div id="middle_container">
 <!--DIV 1.2 | Body-->
 </div>
 <!-- --------------------- -->
 <div id="bottom_container">
 <h1>Footer</h1>
 </div>
 </div>
 </body>
</html>

Here is my JS code:

/*
 Page Structure
*/
import top_container_config, middle_container_config, bottom_container_config from './page_structure_config.js';

//------------------------------------------------------------------------------

function createDOMelement(element_, attributues_)
 var elem_ = document.createElement(element_);
 var k;
 for (k in attributues_)
 elem_.setAttribute(k,attributues_[k]);
 
 return elem_;


//------------------------------------------------------------------------------
function topConainter()
 var _container = "top_container";



//------------------------------------------------------------------------------

function middleContainer()
 var _container_ID = "middle_container";
 var _columns = [];
 var _navVar;
 var _nv_items =[];

 //Columns
 for(var col = 0; col < middle_container_config.mc_columns.num; col++)
 _columns.push(createDOMelement("div",middle_container_config.mc_columns._DOM_));
 

 //My Nav Var
 _navVar = createDOMelement("div", middle_container_config.nav_stack._DOM_);

 //Inside my Nav Var
 for(var nv_i = 0; nv_i < middle_container_config.nav_stack_items.num; nv_i++)
 _nv_items.push(createDOMelement("div",middle_container_config.nav_stack_items._DOM_));
 


 //JOIN ALL ELEMENT - Inside OUt
 for (var a =0; a<_nv_items.length; a++)
 _navVar.appendChild(_nv_items[a]);
 

 //Append NavVar to first column of the middle_container
 _columns[0].appendChild(_navVar);

 //add to DOM
 for(var b=0; b<_columns.length; b++)
 document.getElementById(_container_ID).appendChild(_columns[b]);
 

 console.log(document.getElementById(_container_ID));



//------------------------------------------------------------------------------

function bottomContainer()
 var _container = "bottom_container";

Here is picture of my Node output:

I run my node command as the following:

node page_structure.js

enter image description here

edited Mar 26 at 11:19

asked Mar 25 at 21:28

Andy

817 bronze badges

1

just curious, why do you think npm run sourceFile.js would get it working?

– Tsuna
Mar 25 at 21:33

@Tsuna, interesting I had the idea that "npm run" would execute my JS code but as Petr below mentions node is the command that does it. Thank you. I would edit the question with the proper command.

– Andy
Mar 25 at 21:39

guess you mixed up npm with node haha. It's good that you don't get them mixed up

– Tsuna
Mar 25 at 21:43

Your code is not does not reflect a code for node application but rather reflect a code for web application. I think what you are looking for is to import page_structure.js in your index.html. You don't need to run node application for frontend script.

– Dakota Jang
Mar 25 at 22:24

@DakotaJang, I understand, however I though node would parse my JS file and let me know of any errors like the import keyword. Also, I'm calling my JS file in my HTML file in the <script> tag.

– Andy
Mar 25 at 22:29

|
show 5 more comments

I tested my JS code with Node and the import keyword gets flagged. I have read and watch videos on how to import vars,etc from other JS files.

I believe my syntax is correct, but I do not understand why it does not work properly.

Here is my HTML code:

<!DOCTYPE html>

<html>

 <head>
 <title>JAPC</title>

 <meta charset="utf-8"/>

 <!-- CSS -->
 <link rel="stylesheet" type="text/css" href="./CSS/page_structure.css">
 <link rel="stylesheet" type="text/css" href="./CSS/navstack_structure.css">
 <link rel="stylesheet" type="text/css" href="./CSS/jpdc_structure.css">
 <link rel="icon" href="./Images/Page_Imgs/favicon-16x16.png">

 <!-- JS -->
 <script type="module" src="./JS/page_structure.js"> </script>

 </head>

 <body onload="middleContainer()">
 <div> <!--DIV 1-->
 <div id="top_container">
 <!--DIV 1.1 | Header-->
 <h1>Header</h1>
 </div>
 <!-- --------------------- -->
 <div id="middle_container">
 <!--DIV 1.2 | Body-->
 </div>
 <!-- --------------------- -->
 <div id="bottom_container">
 <h1>Footer</h1>
 </div>
 </div>
 </body>
</html>

Here is my JS code:

/*
 Page Structure
*/
import top_container_config, middle_container_config, bottom_container_config from './page_structure_config.js';

//------------------------------------------------------------------------------

function createDOMelement(element_, attributues_)
 var elem_ = document.createElement(element_);
 var k;
 for (k in attributues_)
 elem_.setAttribute(k,attributues_[k]);
 
 return elem_;


//------------------------------------------------------------------------------
function topConainter()
 var _container = "top_container";



//------------------------------------------------------------------------------

function middleContainer()
 var _container_ID = "middle_container";
 var _columns = [];
 var _navVar;
 var _nv_items =[];

 //Columns
 for(var col = 0; col < middle_container_config.mc_columns.num; col++)
 _columns.push(createDOMelement("div",middle_container_config.mc_columns._DOM_));
 

 //My Nav Var
 _navVar = createDOMelement("div", middle_container_config.nav_stack._DOM_);

 //Inside my Nav Var
 for(var nv_i = 0; nv_i < middle_container_config.nav_stack_items.num; nv_i++)
 _nv_items.push(createDOMelement("div",middle_container_config.nav_stack_items._DOM_));
 


 //JOIN ALL ELEMENT - Inside OUt
 for (var a =0; a<_nv_items.length; a++)
 _navVar.appendChild(_nv_items[a]);
 

 //Append NavVar to first column of the middle_container
 _columns[0].appendChild(_navVar);

 //add to DOM
 for(var b=0; b<_columns.length; b++)
 document.getElementById(_container_ID).appendChild(_columns[b]);
 

 console.log(document.getElementById(_container_ID));



//------------------------------------------------------------------------------

function bottomContainer()
 var _container = "bottom_container";

Here is picture of my Node output:

I run my node command as the following:

node page_structure.js

enter image description here

edited Mar 26 at 11:19

asked Mar 25 at 21:28

Andy

817 bronze badges

I tested my JS code with Node and the import keyword gets flagged. I have read and watch videos on how to import vars,etc from other JS files.

I believe my syntax is correct, but I do not understand why it does not work properly.

Here is my HTML code:

<!DOCTYPE html>

<html>

 <head>
 <title>JAPC</title>

 <meta charset="utf-8"/>

 <!-- CSS -->
 <link rel="stylesheet" type="text/css" href="./CSS/page_structure.css">
 <link rel="stylesheet" type="text/css" href="./CSS/navstack_structure.css">
 <link rel="stylesheet" type="text/css" href="./CSS/jpdc_structure.css">
 <link rel="icon" href="./Images/Page_Imgs/favicon-16x16.png">

 <!-- JS -->
 <script type="module" src="./JS/page_structure.js"> </script>

 </head>

 <body onload="middleContainer()">
 <div> <!--DIV 1-->
 <div id="top_container">
 <!--DIV 1.1 | Header-->
 <h1>Header</h1>
 </div>
 <!-- --------------------- -->
 <div id="middle_container">
 <!--DIV 1.2 | Body-->
 </div>
 <!-- --------------------- -->
 <div id="bottom_container">
 <h1>Footer</h1>
 </div>
 </div>
 </body>
</html>

Here is my JS code:

/*
 Page Structure
*/
import top_container_config, middle_container_config, bottom_container_config from './page_structure_config.js';

//------------------------------------------------------------------------------

function createDOMelement(element_, attributues_)
 var elem_ = document.createElement(element_);
 var k;
 for (k in attributues_)
 elem_.setAttribute(k,attributues_[k]);
 
 return elem_;


//------------------------------------------------------------------------------
function topConainter()
 var _container = "top_container";



//------------------------------------------------------------------------------

function middleContainer()
 var _container_ID = "middle_container";
 var _columns = [];
 var _navVar;
 var _nv_items =[];

 //Columns
 for(var col = 0; col < middle_container_config.mc_columns.num; col++)
 _columns.push(createDOMelement("div",middle_container_config.mc_columns._DOM_));
 

 //My Nav Var
 _navVar = createDOMelement("div", middle_container_config.nav_stack._DOM_);

 //Inside my Nav Var
 for(var nv_i = 0; nv_i < middle_container_config.nav_stack_items.num; nv_i++)
 _nv_items.push(createDOMelement("div",middle_container_config.nav_stack_items._DOM_));
 


 //JOIN ALL ELEMENT - Inside OUt
 for (var a =0; a<_nv_items.length; a++)
 _navVar.appendChild(_nv_items[a]);
 

 //Append NavVar to first column of the middle_container
 _columns[0].appendChild(_navVar);

 //add to DOM
 for(var b=0; b<_columns.length; b++)
 document.getElementById(_container_ID).appendChild(_columns[b]);
 

 console.log(document.getElementById(_container_ID));



//------------------------------------------------------------------------------

function bottomContainer()
 var _container = "bottom_container";

Here is picture of my Node output:

I run my node command as the following:

node page_structure.js

enter image description here

javascript html node.js web file-not-found

edited Mar 26 at 11:19

asked Mar 25 at 21:28

Andy

817 bronze badges

edited Mar 26 at 11:19

asked Mar 25 at 21:28

Andy

817 bronze badges

edited Mar 26 at 11:19

asked Mar 25 at 21:28

Andy

817 bronze badges

asked Mar 25 at 21:28

Andy

817 bronze badges

asked Mar 25 at 21:28

Andy

817 bronze badges

1

just curious, why do you think npm run sourceFile.js would get it working?

– Tsuna
Mar 25 at 21:33

@Tsuna, interesting I had the idea that "npm run" would execute my JS code but as Petr below mentions node is the command that does it. Thank you. I would edit the question with the proper command.

– Andy
Mar 25 at 21:39

guess you mixed up npm with node haha. It's good that you don't get them mixed up

– Tsuna
Mar 25 at 21:43

Your code is not does not reflect a code for node application but rather reflect a code for web application. I think what you are looking for is to import page_structure.js in your index.html. You don't need to run node application for frontend script.

– Dakota Jang
Mar 25 at 22:24

@DakotaJang, I understand, however I though node would parse my JS file and let me know of any errors like the import keyword. Also, I'm calling my JS file in my HTML file in the <script> tag.

– Andy
Mar 25 at 22:29

|
show 5 more comments

1

just curious, why do you think npm run sourceFile.js would get it working?

– Tsuna
Mar 25 at 21:33

@Tsuna, interesting I had the idea that "npm run" would execute my JS code but as Petr below mentions node is the command that does it. Thank you. I would edit the question with the proper command.

– Andy
Mar 25 at 21:39

guess you mixed up npm with node haha. It's good that you don't get them mixed up

– Tsuna
Mar 25 at 21:43

Your code is not does not reflect a code for node application but rather reflect a code for web application. I think what you are looking for is to import page_structure.js in your index.html. You don't need to run node application for frontend script.

– Dakota Jang
Mar 25 at 22:24

@DakotaJang, I understand, however I though node would parse my JS file and let me know of any errors like the import keyword. Also, I'm calling my JS file in my HTML file in the <script> tag.

– Andy
Mar 25 at 22:29

just curious, why do you think npm run sourceFile.js would get it working?

– Tsuna
Mar 25 at 21:33

@Tsuna, interesting I had the idea that "npm run" would execute my JS code but as Petr below mentions node is the command that does it. Thank you. I would edit the question with the proper command.

– Andy
Mar 25 at 21:39

guess you mixed up npm with node haha. It's good that you don't get them mixed up

– Tsuna
Mar 25 at 21:43

Your code is not does not reflect a code for node application but rather reflect a code for web application. I think what you are looking for is to import page_structure.js in your index.html. You don't need to run node application for frontend script.

– Dakota Jang
Mar 25 at 22:24

@DakotaJang, I understand, however I though node would parse my JS file and let me know of any errors like the import keyword. Also, I'm calling my JS file in my HTML file in the <script> tag.

– Andy
Mar 25 at 22:29

|
show 5 more comments

3 Answers
3

active

oldest

votes

The problem is that your onload listener is not aware of middleContainer function because middleContainer is not defined on global scope.

One of the option is to just define the function on global scope.

// in page_structure.js
// middleContainer defined on module scope
function middleContainer()
 var _container_ID = "middle_container";
 ...

// middleContainer defined global scope
window.middleContainer = middleContainer;

Then <body onload="middleContainer()"> should no longer complain about middleContainer being undefined and should run the middleContainer function.

Another option is to add the onload event listener to your module. Instead you can remove the onload attribute on the <body> tag and defined the onload event as follows

// in page_structure.js
function middleContainer()
 var _container_ID = "middle_container";
 ...

// define the listener with your module scoped function to a global event listener
window.onload = middleContainer;

answered Mar 26 at 10:27

Dakota Jang

1081 silver badge9 bronze badges

Dakota, your answer works perfectly. I will however read a bit more on in JS scoping. It's a bit tangled how the language works. Thank you very much.

– Andy
Mar 26 at 11:22

add a comment |

Npm run is used to run a command defined in package.json.

https://docs.npmjs.com/cli/run-script

You can run your script with node page_structure.js

edited Mar 26 at 0:03

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 25 at 21:33

Petr Vojáček

515 bronze badges

Petr, than you, Yes it's node not npm. My bad. I would edit the question.

– Andy
Mar 25 at 21:39

add a comment |

You are misunderstanding how npm and npm run works. package.json is not a file that is used by the code YOU wrote anywhere, it is used by NPM to manage/run projects. Read more here: https://docs.npmjs.com/files/package.json

If you run the command npm init a package.json file will be created for you. You can then add a run script inside so it looks something like:


 "name" : "Some Name",
 "version" : "1.0.0",
 "scripts": 
 "start": "node page_structure.js",
 "other script": "some other bash command"

Now there is a package.json with a script called "start" defined. npm run start will now execute the command node page_structure.js which should run your file.

answered Mar 25 at 21:38

kht

4557 bronze badges

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55346663%2fwhy-my-function-middlecontainer-is-undefine-js-modules%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

The problem is that your onload listener is not aware of middleContainer function because middleContainer is not defined on global scope.

One of the option is to just define the function on global scope.

// in page_structure.js
// middleContainer defined on module scope
function middleContainer()
 var _container_ID = "middle_container";
 ...

// middleContainer defined global scope
window.middleContainer = middleContainer;

Then <body onload="middleContainer()"> should no longer complain about middleContainer being undefined and should run the middleContainer function.

Another option is to add the onload event listener to your module. Instead you can remove the onload attribute on the <body> tag and defined the onload event as follows

// in page_structure.js
function middleContainer()
 var _container_ID = "middle_container";
 ...

// define the listener with your module scoped function to a global event listener
window.onload = middleContainer;

answered Mar 26 at 10:27

Dakota Jang

1081 silver badge9 bronze badges

Dakota, your answer works perfectly. I will however read a bit more on in JS scoping. It's a bit tangled how the language works. Thank you very much.

– Andy
Mar 26 at 11:22

add a comment |

The problem is that your onload listener is not aware of middleContainer function because middleContainer is not defined on global scope.

One of the option is to just define the function on global scope.

// in page_structure.js
// middleContainer defined on module scope
function middleContainer()
 var _container_ID = "middle_container";
 ...

// middleContainer defined global scope
window.middleContainer = middleContainer;

Then <body onload="middleContainer()"> should no longer complain about middleContainer being undefined and should run the middleContainer function.

Another option is to add the onload event listener to your module. Instead you can remove the onload attribute on the <body> tag and defined the onload event as follows

// in page_structure.js
function middleContainer()
 var _container_ID = "middle_container";
 ...

// define the listener with your module scoped function to a global event listener
window.onload = middleContainer;

answered Mar 26 at 10:27

Dakota Jang

1081 silver badge9 bronze badges

Dakota, your answer works perfectly. I will however read a bit more on in JS scoping. It's a bit tangled how the language works. Thank you very much.

– Andy
Mar 26 at 11:22

add a comment |

The problem is that your onload listener is not aware of middleContainer function because middleContainer is not defined on global scope.

One of the option is to just define the function on global scope.

// in page_structure.js
// middleContainer defined on module scope
function middleContainer()
 var _container_ID = "middle_container";
 ...

// middleContainer defined global scope
window.middleContainer = middleContainer;

Then <body onload="middleContainer()"> should no longer complain about middleContainer being undefined and should run the middleContainer function.

Another option is to add the onload event listener to your module. Instead you can remove the onload attribute on the <body> tag and defined the onload event as follows

// in page_structure.js
function middleContainer()
 var _container_ID = "middle_container";
 ...

// define the listener with your module scoped function to a global event listener
window.onload = middleContainer;

answered Mar 26 at 10:27

Dakota Jang

1081 silver badge9 bronze badges

The problem is that your onload listener is not aware of middleContainer function because middleContainer is not defined on global scope.

One of the option is to just define the function on global scope.

// in page_structure.js
// middleContainer defined on module scope
function middleContainer()
 var _container_ID = "middle_container";
 ...

// middleContainer defined global scope
window.middleContainer = middleContainer;

Then <body onload="middleContainer()"> should no longer complain about middleContainer being undefined and should run the middleContainer function.

Another option is to add the onload event listener to your module. Instead you can remove the onload attribute on the <body> tag and defined the onload event as follows

// in page_structure.js
function middleContainer()
 var _container_ID = "middle_container";
 ...

// define the listener with your module scoped function to a global event listener
window.onload = middleContainer;

answered Mar 26 at 10:27

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 26 at 10:27

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 26 at 10:27

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 26 at 10:27

Dakota Jang

1081 silver badge9 bronze badges

Dakota, your answer works perfectly. I will however read a bit more on in JS scoping. It's a bit tangled how the language works. Thank you very much.

– Andy
Mar 26 at 11:22

add a comment |

Dakota, your answer works perfectly. I will however read a bit more on in JS scoping. It's a bit tangled how the language works. Thank you very much.

– Andy
Mar 26 at 11:22

Dakota, your answer works perfectly. I will however read a bit more on in JS scoping. It's a bit tangled how the language works. Thank you very much.

– Andy
Mar 26 at 11:22

add a comment |

Npm run is used to run a command defined in package.json.

https://docs.npmjs.com/cli/run-script

You can run your script with node page_structure.js

edited Mar 26 at 0:03

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 25 at 21:33

Petr Vojáček

515 bronze badges

Petr, than you, Yes it's node not npm. My bad. I would edit the question.

– Andy
Mar 25 at 21:39

add a comment |

Npm run is used to run a command defined in package.json.

https://docs.npmjs.com/cli/run-script

You can run your script with node page_structure.js

edited Mar 26 at 0:03

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 25 at 21:33

Petr Vojáček

515 bronze badges

Petr, than you, Yes it's node not npm. My bad. I would edit the question.

– Andy
Mar 25 at 21:39

add a comment |

Npm run is used to run a command defined in package.json.

https://docs.npmjs.com/cli/run-script

You can run your script with node page_structure.js

edited Mar 26 at 0:03

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 25 at 21:33

Petr Vojáček

515 bronze badges

Npm run is used to run a command defined in package.json.

https://docs.npmjs.com/cli/run-script

You can run your script with node page_structure.js

edited Mar 26 at 0:03

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 25 at 21:33

Petr Vojáček

515 bronze badges

edited Mar 26 at 0:03

Dakota Jang

1081 silver badge9 bronze badges

edited Mar 26 at 0:03

Dakota Jang

1081 silver badge9 bronze badges

edited Mar 26 at 0:03

Dakota Jang

1081 silver badge9 bronze badges

answered Mar 25 at 21:33

Petr Vojáček

515 bronze badges

answered Mar 25 at 21:33

Petr Vojáček

515 bronze badges

answered Mar 25 at 21:33

Petr Vojáček

515 bronze badges

Petr, than you, Yes it's node not npm. My bad. I would edit the question.

– Andy
Mar 25 at 21:39

add a comment |

Petr, than you, Yes it's node not npm. My bad. I would edit the question.

– Andy
Mar 25 at 21:39

Petr, than you, Yes it's node not npm. My bad. I would edit the question.

– Andy
Mar 25 at 21:39

add a comment |

If you run the command npm init a package.json file will be created for you. You can then add a run script inside so it looks something like:


 "name" : "Some Name",
 "version" : "1.0.0",
 "scripts": 
 "start": "node page_structure.js",
 "other script": "some other bash command"

Now there is a package.json with a script called "start" defined. npm run start will now execute the command node page_structure.js which should run your file.

answered Mar 25 at 21:38

kht

4557 bronze badges

add a comment |

If you run the command npm init a package.json file will be created for you. You can then add a run script inside so it looks something like:


 "name" : "Some Name",
 "version" : "1.0.0",
 "scripts": 
 "start": "node page_structure.js",
 "other script": "some other bash command"

Now there is a package.json with a script called "start" defined. npm run start will now execute the command node page_structure.js which should run your file.

answered Mar 25 at 21:38

kht

4557 bronze badges

add a comment |

If you run the command npm init a package.json file will be created for you. You can then add a run script inside so it looks something like:


 "name" : "Some Name",
 "version" : "1.0.0",
 "scripts": 
 "start": "node page_structure.js",
 "other script": "some other bash command"

Now there is a package.json with a script called "start" defined. npm run start will now execute the command node page_structure.js which should run your file.

answered Mar 25 at 21:38

kht

4557 bronze badges

If you run the command npm init a package.json file will be created for you. You can then add a run script inside so it looks something like:


 "name" : "Some Name",
 "version" : "1.0.0",
 "scripts": 
 "start": "node page_structure.js",
 "other script": "some other bash command"

Now there is a package.json with a script called "start" defined. npm run start will now execute the command node page_structure.js which should run your file.

answered Mar 25 at 21:38

kht

4557 bronze badges

answered Mar 25 at 21:38

kht

4557 bronze badges

answered Mar 25 at 21:38

kht

4557 bronze badges

answered Mar 25 at 21:38

kht

4557 bronze badges

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Styjun

3 Answers
3

Your Answer

Post as a guest

3 Answers
3

3 Answers
3

Post as a guest

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Post as a guest

3 Answers 3

3 Answers 3

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

3 Answers
3

3 Answers
3

3 Answers
3