yii2 Fullcalendar - Why is alert for CalEvent working but not for updating innerHtml?

问题

I am using philippfrenzel/yii2fullcalendar and I want to show the event description.

when I am using the code:

<script>
var JSEventClick = (function(calEvent, jsEvent, view) {
   //  document.getElementsByClassName('.fc-title').innerHtml += 'calEvent.nonstandard.field1' ;
    alert(calEvent.title + ' -- ' + calEvent.nonstandard.field1);
});
</script>

it is working fine.

but when I am using:

<script>
var JSEventClick = (function(calEvent, jsEvent, view) {
     document.getElementsByClassName('.fc-title').innerHtml += calEvent.nonstandard.field1 ;
  //  alert(calEvent.title + ' -- ' + calEvent.nonstandard.field1);
});
</script>

<script>
(function(calEvent, jsEvent, view) {
     document.getElementsByClassName('.fc-title').innerHtml += calEvent.nonstandard.field1;
  //  alert(calEvent.title + ' -- ' + calEvent.nonstandard.field1);
});
</script>

also tried

<script>
var JSEventClick = (function(calEvent, jsEvent, view) {
    var myEvent = document.getElementsByClassName('.fc-title') ;
    var codeBlock = ( ' -- ' + calEvent.nonstandard.field1);
    myEvent.innerHtml += codeBlock;
  //  alert(calEvent.title + ' -- ' + calEvent.nonstandard.field1);
});
</script>

The contents of my html:

IPS Annual Day

回答1:

This is the line where you have the problem

document.getElementsByClassName('.fc-title').innerHtml += calEvent.nonstandard.field1;

getElementsByClassName will return an array-like object with all the tags which have the class you have specified. An array-like object doesn't have an innerHTML. The tags stored in the array-like object have an innerHTML. Also, I believe that you do not have an .fc-title class, you have an fc-title class instead, finally, make sure that innerHTML is typed properly. Proposed solution:

for (var element of document.getElementsByClassName('fc-title')) {
    element.innerHTML += calEvent.nonstandard.field1
}

来源：https://stackoverflow.com/questions/58048115/yii2-fullcalendar-why-is-alert-for-calevent-working-but-not-for-updating-inner

标签

javascript

yii2

fullcalendar