Why is this variable undefined?
<p>I'm trying to extend the JavaScript on a page I maintain to apply some formatting as the calendar section of the page is loaded. There's a prexisting function called <code>InitCalendar(month)</code> that loads the section in response to a click.</p>

<p>The calendar is written as a list of days. I'd like to alter the height of <code>&lt;div&gt;</code> elements containing events based on the number of events per day. If there are two rather than one event in a day, each event needs to shrink to fit, etc. </p>

<p>So the intended algorithm is to:</p>

<ul>
<li><p>Get an array of <code>&lt;li&gt;</code>, the days in the calendar.</p></li>
<li><p>For each <code>&lt;li&gt;</code>, get a array of the <code>&lt;div&gt;</code> elements it contains</p></li>
<li><p>Set the appropriate height based on the length of the <code>div</code> array.</p></li>
</ul>

<p>My effort is failing with this error: "Uncaught TypeError: Cannot read property 'style' of undefined"</p>

<p>Here's my code:</p>

<pre><code>function setHeights(n, string, elems) {
   // start at 1 to avoid the first element in the array.
   for (var i = 1; i &lt;= n; i++) {
       var x = elems[i];
       x.style.height = string;
   };
};

function eventHeights() {
    var ls = $(".calendar").children().children();
    var n = ls.length;

    for (var i = 0; i &lt; n; i++) {
        var divs = ls[i].children;

        switch (divs.length) {
        case 4:
            setHeights(4, "27px", divs);
        case 3:
            setHeights(3, "52px", divs);
        };
     };
};

function InitCalendar(month) 
{
    // ... Some preexisting code to load the calendar section ...

    eventHeights();
} 
</code></pre>

<p>Here's a fragment of the HTML to show the structure I'm working with:</p>

<pre><code>&lt;div class="calendar"&gt;
  &lt;ul&gt;
    &lt;li&gt;
       &lt;div&gt;...&lt;/div&gt;
       &lt;div&gt;...&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
       &lt;div&gt;...&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
       &lt;div&gt;...&lt;/div&gt;
       &lt;div&gt;...&lt;/div&gt;
       &lt;div&gt;...&lt;/div&gt;
       &lt;div&gt;...&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;              
</code></pre>

<p>Help figuring this out greatly appreciated!            </p>
