Databases
StackOverflow2013
Postsdbo
POStrange behaviour of included JS file in node.js
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStrange behaviour of included JS file in node.js
    text
    copied!<p>I am making a node app that is in it current state very simple, but I get an issue I can't figure out.</p> <p>The generated html of my express app looks like this:</p> <pre><code>&lt;html style="" class=" js no-touch svg inlinesvg svgclippaths no-ie8compat"&gt; &lt;head&gt; ... &lt;script type="text/javascript" src="/javascripts/mouse.js"&gt;&lt;/script&gt; ... &lt;/head&gt; &lt;body class="antialiased" style=""&gt;&lt;div class="row"&gt;&lt;div class="row"&gt; &lt;script&gt; var mouse; var X = 0; var Y = 0; window.onload = function() { alert(Mouse());//=&gt; undefined mouse = Mouse(); mouse.setMouseMoveCallback(function(e){ //THIS LINE FAILS: "Cannot call method 'setMouseMoveCallback' of undefined" X = e.x; Y = e.y; alert("move"); }); } ... &lt;/html&gt; </code></pre> <p>The include script tag in the header adds this javascript file:</p> <pre><code>function Mouse(onObject){ var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0], mouseDownCount = 0; var mouseDownCallbacks = [0, 0, 0, 0, 0, 0, 0, 0, 0]; var mouseTracer = 0; var tracePosArray; var target = onObject; if(!onObject){ onObject = document; } onObject.onmousedown = function(evt) { mouseDown[evt.button] = 1; mouseDownCount--; if(mouseDownCallbacks[evt.button] != 0){ mouseDownCallbacks[evt.button](evt); } } onObject.onmouseup = function(evt) { mouseDown[evt.button] = 0; mouseDownCount--; } var mousemoveCallback; onObject.onmousemove = function(evt){ //Tracing mouse here: if(mouseTracer){ tracePosArray.push([evt.pageX,evt.pageY]); } if(mousemoveCallback){ mousemoveCallback(evt); } } var mouseWheelCallback; onObject.onmousewheel = function(evt){ if(mouseWheelCallback){ mouseWheelCallback(evt); } } var mouseOverCallback; onObject.onmouseover = function(evt){ if(mouseOverCallback){ mouseOverCallback(evt); } } var mouseOutCallback; onObject.onmouseout = function(evt){ if(mouseOutCallback){ mouseOutCallback(evt); } } //TODO: There is a bug when you move the mouse out while you are pressing a button. The key is still counted as "pressed" even though you release it outside of the intended area //NOTE: might have fixed the bug. Do some further investigation by making a smaller element. this.anyDown = function(){ if(mouseDownCount){ for(p in mouseDown){ if(mouseDown[p]){ return true; } } } } this.setLeftDownCallbackFunction = function(fun){ mouseDownCallbacks[0] = fun; } this.setRightDownCallbackFunction = function(fun){ mouseDownCallbacks[2] = fun; } this.setMiddleDownCallbackFunction = function(fun){ mouseDownCallbacks[4] = fun; } this.setSpcifiedDownCallbackFunction = function(num, fun){ mouseDownCallbacks[num] = fun; } this.leftDown = function(){ if(mouseDownCount){ return mouseDown[0] != 0; } } this.rightDown = function(){ if(mouseDownCount){ return mouseDown[2] != 0; } } this.middleDown = function(){ if(mouseDownCount){ return mouseDown[4] != 0; } } this.setMouseMoveCallback = function (callback){ mousemoveCallback = callback; } this.setMouseWheelCallback = function (callback){ mouseWheelCallback = callback; } this.setMouseOverCallback = function (callback){ mouseOverCallback = callback; } this.setMouseOutCallback = function (callback){ mouseOutCallback = callback; } this.enableTracer = function(){ tracePosArray = new Array(); mouseTracer = 1; } this.getMouseTracerData = function() { return tracePosArray; } } </code></pre> <p>So: I have assured that the JS file is loaded. But none the less I am not able to access the <code>Mouse()</code> method in my <code>window.onload</code> function in the body, it shows up as <code>undefined</code>. This is very strange to me because <strong>if I create a HTML file that does exactly the same thing I am able to access it</strong>.</p> <p>What is going on here? Is there some magic trickery in node.js / express that disables this kind of interaction?</p> <hr> <p>Additional notes:</p> <ul> <li>I am using Jade as the template engine. </li> <li>The "mouse.js" file works. I have used it several times before. </li> <li>I am using socket.io for communication between the client and server.</li> </ul> <p>Complete header:</p> <pre><code>&lt;head&gt;&lt;title&gt;My awesome title&lt;/title&gt;&lt;link rel="stylesheet" href="/stylesheets/foundation.min.css"&gt;&lt;link rel="stylesheet" href="/stylesheets/normalize.css"&gt;&lt;link rel="stylesheet" href="/stylesheets/style.css"&gt;&lt;script type="text/javascript" src="/socket.io/socket.io.js"&gt;&lt;/script&gt;&lt;style type="text/css"&gt;&lt;/style&gt;&lt;script type="text/javascript" src="/javascripts/jquery.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/javascripts/vendor/custom.modernizr.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/javascripts/vendor/zepto.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/javascripts/mouse.js"&gt;&lt;/script&gt;&lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"&gt;&lt;meta name="viewport" content="width=device-width"&gt;&lt;/head&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload