Q:

How to make a function set css width with a JavaScript variable?

I have this code:
...<script>
function handleSize()
{
var setObjectSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setObjectSize + "px";
document.getElementById("spin").style.height=setObjectSize + "px";
}
</script>
</head>
<body>
<section id="spin" onLoad="handleSize()">...

All I am trying to do is to create a function that will set the height and width of the element according to window size using a formula and make sure height and width are the same. I am very new to javascript (almost know nothing about it), so despite there being a ton of example of such questions, and me following them, I can't get this code to work. What am I doing wrong?

A:

The problem that I'm seeing, is that the onload event for the section tag isn't firing.  You should add your javascript as a self-executing anonymous function to the end of your body tag and this will work for you.
    <body>
        <section id="spin" style="border:5px solid black;"></section>

        <script>
            (function () {
                var setWindowSize = window.innerWidth - 600;
                document.getElementById("spin").style.width = setWindowSize + "px";
                document.getElementById("spin").style.height = setWindowSize + "px";
            })();
        </script>
    </body>

See Here for a demo:  http://jsfiddle.net/T7DW6/

