Javascript: selfmade methods not working correctly
- by hdr
Hi everyone,
I tried to figure this out for some days now, I tried to use my own object to sort of replace the global object to reduce problems with other scripts (userscripts, chrome extensions... that kind of stuff). However I can't get things to work for some reason. I tried some debugging with JSLint, the developer tools included in Google Chrome, Firebug and the integrated schript debugger in IE8 but there is no error that explains why it doesn't work at all in any browser I tried.
I tried IE 8, Google Chrome 10.0.612.3 dev, Firefox 3.6.13, Safari 5.0.3 and Opera 11.
So... here is the code:
HTML:
<!DOCTYPE HTML>
<html manifest="c.manifest">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script src="https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/lib/excanvas.js"></script>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/data.js"></script>
</head>
<body>
<div id="controls">
<button onclick="MYOBJECTis.next()">Next</button>
</div>
<div id="textfield"></div>
<canvas id="game"></canvas>
</body>
</html>
Javascript:
var that = window, it = document, k = Math.floor;
var MYOBJECTis = {
aresizer: function(){
// This method looks like it doesn't work.
// It should automatically resize all the div elements and the body.
// JSLint: no error (execpt for "'window' is not defined." which is normal since
// JSLint does nor recognize references to the global object like "window" or "self"
// even if you assume a browser)
// Firebug: no error
// Chrome dev tools: no error
// IE8: that.documentElement.clientWidth is null or not an object
"use strict";
var a = that.innerWidth || that.documentElement.clientWidth, d = that.innerHeight || that.documentElement.clientHeight;
(function() {
for(var b = 0, c = it.getElementsByTagName("div");b < c.length;b++) {
c.style.width = k(c.offsetWidth) / 100 * k(a);
c.style.height = k(c.offsetHight) / 100 * k(d);
}
}());
(function() {
var b = it.getElementsByTagName("body");
b.width = a;
b.height = d;
}());
},
next: function(){
// This method looks like it doesn't work.
// It should change the text inside a div element
// JSLint: no error (execpt for "'window' is not defined.")
// Firebug: no error
// Chrome dev tools: no error
// IE8: no error (execpt for being painfully slow)
"use strict";
var b = it.getElementById("textfield"), a = [], c;
switch(c !== typeof Number){
case true:
a[1] = ["HI"];
c = 0;
break;
case false:
return Error;
default:
b.innerHtml = a[c];
c+=1;
}
}
};
// auto events
(function(){
"use strict";
that.onresize = MYOBJECTis.aresizer();
}());
If anyone can help me out with this I would very much appreciate it.
EDIT: To answer the question what's not working I can just say that no method I showed here is working at all and I don't know the cause of the problem. I also tried to clean up some of the code that has most likely nothing to do with it. Additional information is in the comments inside the code.
