innerHTML not working

[jimfog]

I am building a calendar.This is the HTML that is produced in weekview and are the days on top of the columns:

   <thead><tr class="fc-first fc-last"><th class="fc-agenda-axis fc-widget-header fc-first" style="width: 50px;"> </th><th class="fc-sun fc-col0 fc-widget-header" style="width: 181px;">Κυρ 4/27</th>               <th class="fc-mon fc-col1 fc-widget-header" style="width: 180px;">Mon 4/28</th>               <th class="fc-tue fc-col2 fc-widget-header" style="width: 180px;">Tue 4/29</th>               <th class="fc-wed fc-col3 fc-widget-header" style="width: 180px;">Wed 4/30</th>               <th class="fc-thu fc-col4 fc-widget-header" style="width: 180px;">Thu 5/1</th>               <th class="fc-fri fc-col5 fc-widget-header" style="width: 180px;">Fri 5/2</th>               <th class="fc-sat fc-col6 fc-widget-header">Σάββ 5/3</th>               <th class="fc-agenda-gutter fc-widget-header fc-last" style="width: 15px;"> </th></tr>       </thead>

If I want to access Mon 4/28 I use this:

var DOM=document.getElementsByClassName("fc-mon fc-widget-header")[0].innerHTML;

The above test are made in the dev tools console.

Now if I want to use a function this is the code:

function findview()        { var DOM=document.getElementsByClassName("fc-mon fc-widget-header")[0].innerHTML;           return DOM;               }

The above,in the console also works but it does not where it should really go.Let me explain:

This is the file that prints the calendar http://1drv.ms/1ke2gfe and in line 3650 you will see the function that prints week/day view(I have placed a comment there)...exactly above you will find the above function and in line 4331 the function is being called.

 

And here is the problem...in the console I get the below message:

Uncaught TypeError: Cannot read property 'innerHTML' of undefined 

What I am trying to say is that the function as standalone works(when used in the console) but when called in the file and from within the function AgendaEventRenderer() it does not.Why that happens?

 

Lastly the file I gave you above is from this plugin here...http://arshaw.com/fullcalendar/

[davej]

I'm doubtful that getElementsByClassName can find more than one class at a time.

 

The function should return an array but you should test the length.

[jimfog]

In my case I just go to find one class...this is done with this code:

var DOM=document.getElementsByClassName("fc-mon fc-widget-header");

The above code works,,,

 

Just read my post again what is the problem.

Edited April 28, 2014 by jimfog

[davej]

"fc-mon" is a class. "fc-widget-header" is another class.

 

Anyway you get a array. Now before you use the array go ahead and test the length of the array to make sure it isn't zero.

[thescientist]

"fc-mon" is a class. "fc-widget-header" is another class.

 

that appears to be supported

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

[jimfog]

that appears to be supported

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

So,you disagree with davej

[davej]

Apparently Mozilla supports multiple classes -- so go ahead and test the length of the array to see if it is indeed returning the element or elements you expect it to.

function findview(){ var list=document.getElementsByClassName("fc-mon fc-widget-header");  alert('len='+list.length);  return list[0].innerHTML;       }

[jimfog]

 

Apparently Mozilla supports multiple classes -- so go ahead and test the length of the array to see if it is indeed returning the element or elements you expect it to.

function findview(){ var list=document.getElementsByClassName("fc-mon fc-widget-header");  alert('len='+list.length);  return list[0].innerHTML;       }

The code produces the same result in both browsers(FF and Chrome)...in other words the list.length is equal to 1 and also the inner HTML is printed to the browser.

 

The functions-as standalone works...but in the context of the code I am mentioning above and you will find in the link I gave it does not.

The console prints Cannot read property 'innerHTML' of undefined.

 

As I said,this the problem I am trying to solve....just read my original post.

[Ingolme]

It sounds like list[0] doesn't have anything in it. What does list.length say?

[davej]

It seems to work for me...

<!DOCTYPE html><html><head><meta charset="utf-8"><title>JimFog</title><style></style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>window.onload = init;function init() {document.getElementById('btn1').onclick = put;}function put(){document.getElementById('out1').innerHTML = 'findview() returns ['+ findview() +']';}function findview(){ var list=document.getElementsByClassName("fc-mon fc-widget-header");  alert('len='+list.length);  return list[0].innerHTML;}</script></head><body><input type="button" id="btn1" value="Enter"/><div id="out1"></div><hr/><table><thead><tr class="fc-first fc-last">    <th class="fc-agenda-axis fc-widget-header fc-first" style="width: 50px;"> </th>    <th class="fc-sun fc-col0 fc-widget-header" style="width: 181px;">Sun 4/27</th>    <th class="fc-mon fc-col1 fc-widget-header" style="width: 180px;">Mon 4/28</th>    <th class="fc-tue fc-col2 fc-widget-header" style="width: 180px;">Tue 4/29</th>    <th class="fc-wed fc-col3 fc-widget-header" style="width: 180px;">Wed 4/30</th>    <th class="fc-thu fc-col4 fc-widget-header" style="width: 180px;">Thu 5/1</th>    <th class="fc-fri fc-col5 fc-widget-header" style="width: 180px;">Fri 5/2</th>    <th class="fc-sat fc-col6 fc-widget-header">Sat 5/3</th>    <th class="fc-agenda-gutter fc-widget-header fc-last" style="width: 15px;"> </th></tr></thead></table></body></html>

...perhaps you are not waiting for the HTML to be rendered?

[justsomeguy]

If it's not returning any elements, then wouldn't the obvious solution be that there isn't a matching element on the page when you run that code? I mean, document.getElementsByClassName works, right? So, if it works, and it doesn't return any elements, then what does that mean?

[jimfog]

It sounds like list[0] doesn't have anything in it. What does list.length say?

This is the function:

function findview(){ var list=document.getElementsByClassName("fc-mon fc-widget-header");  len=list.length  return len;       }

The above function returns 1.

Now,if I use this code:

function findview(){ var list=document.getElementsByClassName("fc-mon fc-widget-header")[0].innerHTML;  len=list.length;  return len;       }

The result is 9...which of course is the number of the characters inside the HTML part,.more specifically the date depiction in a format such as Tue 4/29(that is today)

[justsomeguy]

Looks like it's working correctly. Where is the problem?

[jimfog]

If it's not returning any elements, then wouldn't the obvious solution be that there isn't a matching element on the page when you run that code? I mean, document.getElementsByClassName works, right? So, if it works, and it doesn't return any elements, then what does that mean?

You are right to say the there are not elements there to be returned-probably.

I mean the class is returned but not the innerHTML.

 

I can make only one assumption based on the above.I am trying the "get" the element before this is rendered.

I am not sure but probably the explanation.

 

Meaning I have to call the function after the element is rendered.And that means I have to find the proper line to place it in the file I gave you above.

[jimfog]

I have found somehow a solution to the problem.The function that produces the dates in the top of the columns is this-and specifically a for loop(I have commented it):

function buildHeadHTML() {		var headerClass = tm + "-widget-header";		var html = '';		var col;		var date;		html += "<thead><tr>";		if (showWeekNumbers) {			html +=				"<th class='fc-week-number " + headerClass + "'>" +				htmlEscape(weekNumberTitle) +				"</th>";		}		for (col=0; col<colCnt; col++) {//this loop prints the dates			date = cellToDate(0, col);			html +=				"<th class='fc-day-header fc-" + dayIDs[date.getDay()] + " " + headerClass + "'>" +				htmlEscape(formatDate(date, colFormat)) +				"</th>";		}		html += "</tr></thead>";		return html;	} 

The reason behind this topic is a way to find a way to make a distinction when the calendar displays weekview and dayview.

To put it differently.The way the code of the plugin is structured If I change the code in week view, day view is also affected something I do not want since I want to make changes that affect only week view.

 

The solution is to "observe" the colCnt variable...it has a different a value if it is week view and different when it is day view.

 

My original intention was to use innerHTML to accomplish what I describe above(with a logic I would think of)...it is no longer necessary.

 

Any comments are welcome.

[justsomeguy]

It seems like the solution to determine which view it is in would be a variable that is specifically for that, instead of relying on a column count variable.

[jimfog]

It seems like the solution to determine which view it is in would be a variable that is specifically for that, instead of relying on a column count variable.

I do not disagree...but I have not find such variable(yet)till I find one I will have to go with the method described above.

 

Besides we are talking for 6100 lines of code...which none is mine.it is the fullcalendar jquery plugin.

 

Searching through such code is not easy,even by using an IDE(I use Nebeans).

[justsomeguy]

You don't think that someone writing a 6000+ line program would do something as basic and simple as keeping track of which view the calendar is in? Have you looked at the code for switching views to see what it does?

[jimfog]

You don't think that someone writing a 6000+ line program would do something as basic and simple as keeping track of which view the calendar is in? Have you looked at the code for switching views to see what it does?

As I said...I am searching the issue. I am not saying you are wrong.