CODEWITHSUNDEEP
javascript
Zopa
Zopa

Reputation: 668

Why is this variable undefined?

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 InitCalendar(month) that loads the section in response to a click.

The calendar is written as a list of days. I'd like to alter the height of <div> 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.

So the intended algorithm is to:

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

Here's my code:

function setHeights(n, string, elems) {
   // start at 1 to avoid the first element in the array.
   for (var i = 1; i <= 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 < 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();
}

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

<div class="calendar">
  <ul>
    <li>
       <div>...</div>
       <div>...</div>
    </li>
    <li>
       <div>...</div>
    </li>
    <li>
       <div>...</div>
       <div>...</div>
       <div>...</div>
       <div>...</div>
    </li>
  </ul>
</div>

Help figuring this out greatly appreciated!

Upvotes: 0

Views: 388

Answers (5)

Zopa
Zopa

Reputation: 668

There's another problem with this code, and while it wasn't the cause of the error message, it made debugging brutal. The switch statement I had lacks break statements in its case entries. So even with the i<=n bug fixed, my code as written will iterate through the length 4 arrays, setting heights to 27 px, and then move on to case 3:, setting the second and third div heights to 52 px.

Not at all what I intended, and the cause of much confusion.

Upvotes: 0

Francisco Soto
Francisco Soto

Reputation: 10392

I think you have an error in your :

function setHeights(n, string, elems) {
   for (var i = 1; i <= n; i++) {
       var x = elems[i];
       x.style.height = string;
   };
};

n is the length, supposing a length of 4, you iterate from 1 to 4, and 4 is an invalid index since they are 0 based. Should be 0 to 3, so try changing it to :

function setHeights(n, string, elems) {
   for (var i = 0; i < n; i++) {
       var x = elems[i];
       x.style.height = string;
   };
};

Upvotes: 1

Mike Christensen
Mike Christensen

Reputation: 91608

I think you might want:

for (var i = 0; i < n; i++) {

It's looping through an array, which starts at zero.

Upvotes: 0

wsanville
wsanville

Reputation: 37516

JavaScript arrays are 0 based, so the for loop in setHeights is incorrect. Note the change in the assignment of i and the change from <= to < in the condition:

for (var i = 0; i < n; i++)
{
    var x = elems[i];
    x.style.height = string;
}

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116110

Arrays are indexed from 0 to length-1, not from 1 to length. In eventHeights you're doing it right, but in setHeight, the index is wrong.

Upvotes: 3

Related Questions