CODEWITHSUNDEEP
javascriptmethods
hdr
hdr

Reputation: 13

Javascript: selfmade methods not working correctly

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: no error
         "use strict";
     var screenWidth, screenHeight;
     if(window.innerWidth) {
         screenWidth = window.innerWidth;
        }
     else {
         if(document.documentElement && document.documentElement.clientWidth) {
            screenWidth = document.documentElement.clientWidth;
            }
         else {
            if(document.body) {
                screenWidth = document.body.clientWidth;
            }
        }
    }
     if(window.innerHeight) {
         screenHeight = window.innerHeight;
        }
     else {
         if(document.documentElement && document.documentElement.clientHeight) {
            screenHeight = document.documentElement.clientHeight;
            }
         else {
             if(document.body) {
                screenHeight = document.body.clientHeight;
            }
        }
    }
     (function() {
     for(var b = 0, c = it.getElementsByTagName("div");b < c.length;b++) {
         c[b].style.width = k(c.offsetWidth) / 100 * k(screenWidth);
         c[b].style.height = k(c.offsetHight) / 100 * k(screenHeight);
            }
        }());
     (function() {
     var b = it.getElementsByTagName("body");
     b.width = screenWidth;
     b.height = screenHeight;
        }());
    },


     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: not implemented (starting at the var statement below)
         "use strict";
         var b = it.getElementById("textfield"), a = [], c;
         switch(c !== typeof Number){
            case true:
                 a[1] = ["HI"];
                 c = 0;
                 break;
            case false:
                 b.innerHtml = a[c];
                 c+=1;
                 break;
            default:
             return Error; 
            }
        }
    };
// 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.

EDIT2: I updated the code and the comments inside it to what it looks like now but I still can't get it to work. I also got a new error on the next method from IE8.

Upvotes: 0

Views: 406

Answers (4)

nedk
nedk

Reputation: 663

The main problem seems to be inside your loop:

c = it.getElementsByTagName("div");

returns an array of DOM Elements; and you're trying to apply styles on the entire array:

c.style.width

when you should be doing

c[b].style.width

In the next function your default case will never get executed because the condition will always be wither true or false and in both cases you're preventing the switch from moving down to the next case by using either a break or return - the default will only execute if there is no matching case defined or if the case above it doesn't break

Using document.getElementsByTagName returns an Array of Elements, hence the getElements.

You cannot apply styles to an Array of Elements, only to an individual Element, therefore you need to indicate the index value to the Element you're wish to modify, like so:

c[b].style.width = k(c[b].offsetWidth) / 100 * k(screenWidth) + "px";
c[b].style.height = k(c[b].offsetHight) / 100 * k(screenHeight) + "px";

and

var b = it.getElementsByTagName("body");
b[0].style.width = screenWidth + "px";
b[0].style.height = screenHeight + "px";

Upvotes: 1

Thai
Thai

Reputation: 11354

You are assigning an event handler. You just have to stick a function there, but not call it. So, this line:

 that.onresize = MYOBJECTis.aresizer();

Should be

 that.onresize = MYOBJECTis.aresizer;

Or

 that.onresize = function() {
     MYOBJECTis.aresizer();
 };

if you want to preserve the this in aresizer.

Upvotes: 0

David M&#229;rtensson
David M&#229;rtensson

Reputation: 7600

I can see some very strange things in the next method.

You assign it.getElementById("textfield") to b but b is never used.

You declare c and then checks if c !== typeof Number which will always be tru as you have not set c yet.

I think next maybe should use variables created on the MYOBJECTis level instead of local variables.

Upvotes: 0

Andrey
Andrey

Reputation: 21285

As a side note, you can use "window" instead of "that" - it's globally accessible.

I would use following to get client width and be compatible across the board:

if (window.innerWidth)
{
screenWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
screenWidth=document.documentElement.clientWidth;
}   
else if (document.body)
{
screenWidth=document.body.clientWidth;
}

Upvotes: 0

Related Questions