Databases
StackOverflow2013
Postsdbo
POWhy is this variable undefined?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is this variable undefined?
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USZopa
    1. USZopa
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COFew comments: Why is your loop starting from 1? Should be starting from 0. It looks like you're not passing an array into setHeights. `ls.children` is not an array
      singulars
      1. POWhy is this variable undefined?
      1. USJuan Mendes
    2. COIt's starting from 1 because the first `<div>` in each list should be skipped (it holds the day number, not an event). Can you clarify your second point? `ls.children()` seemed to give me a different error...
      singulars
      1. POWhy is this variable undefined?
      1. USZopa
    3. COIf your loop doesn't start at 0, there should be some comments about it, don't keep it a mistery. `ls.children` returns `undefined`, therefore you can't call `ls.children()` you probably want to use `$(ls[i].children())`, or `ls[i].childNodes` but that could contain text nodes that you don't are about
      singulars
      1. POWhy is this variable undefined?
      1. USJuan Mendes
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload