Skip to main content
added more suggestions
Source Link
Dylan Cristy
  • 12.8k
  • 3
  • 32
  • 72

You need to put quotes around the call to button_click() in your input's onCLick (and you don't need the semi-colon):

<input type="checkbox" onClick="button_click()">

In general, for any attribute of an HTML element, you have to enclose the value in quotes.


I was just typing up an edit where I was going to say I didn't think that was actually going to work, because putting the function in the onClick like that assumes that the function is available in the global namespace, and having your function in the field customizer (which is presumably a class??? I've never written a field customizer...) will mean it's not available like that.

You could maybe try something like

event.domElement.innerHtml = `<input type="checkbox"> APP<br>`;
event.domElement.onClick = this.button_click;

or

event.domElement.innerHtml = `<input type="checkbox"> APP<br>`;
event.domElement.click = this.button_click;

but even if that works, you'd be attaching the click handler to your checkbox's parent div (the domElement), not to the checkbox itself (the domElement's innerHtml).

Another option might be to do something like this:

event.domElement.innerHtml = `<input type="checkbox" id="mycheckbox"> APP<br>`;

document.getElementById("mycheckbox").onclick = this.button_click;

but even that has problems I can see:

  • You'd need a unique ID for each checkbox, since it appears you are using it in a list view, so unless there is a way to get that item's list ID (or even row number in the view) to encode in the input's ID, you wouldn't be able to distinguish between all the checkboxes that end up in the view.
  • Again, since I've never written a field customizer, I don't when setting the event.domElement.innerHtml actually makes it into the DOM. If it's immediate than it might be available to be found by document.getElementById, but if there's some other hidden rendering step, then it might not be available yet and calling document.getElementById will find nothing.

You need to put quotes around the call to button_click() in your input's onCLick (and you don't need the semi-colon):

<input type="checkbox" onClick="button_click()">

In general, for any attribute of an HTML element, you have to enclose the value in quotes.

You need to put quotes around the call to button_click() in your input's onCLick (and you don't need the semi-colon):

<input type="checkbox" onClick="button_click()">

In general, for any attribute of an HTML element, you have to enclose the value in quotes.


I was just typing up an edit where I was going to say I didn't think that was actually going to work, because putting the function in the onClick like that assumes that the function is available in the global namespace, and having your function in the field customizer (which is presumably a class??? I've never written a field customizer...) will mean it's not available like that.

You could maybe try something like

event.domElement.innerHtml = `<input type="checkbox"> APP<br>`;
event.domElement.onClick = this.button_click;

or

event.domElement.innerHtml = `<input type="checkbox"> APP<br>`;
event.domElement.click = this.button_click;

but even if that works, you'd be attaching the click handler to your checkbox's parent div (the domElement), not to the checkbox itself (the domElement's innerHtml).

Another option might be to do something like this:

event.domElement.innerHtml = `<input type="checkbox" id="mycheckbox"> APP<br>`;

document.getElementById("mycheckbox").onclick = this.button_click;

but even that has problems I can see:

  • You'd need a unique ID for each checkbox, since it appears you are using it in a list view, so unless there is a way to get that item's list ID (or even row number in the view) to encode in the input's ID, you wouldn't be able to distinguish between all the checkboxes that end up in the view.
  • Again, since I've never written a field customizer, I don't when setting the event.domElement.innerHtml actually makes it into the DOM. If it's immediate than it might be available to be found by document.getElementById, but if there's some other hidden rendering step, then it might not be available yet and calling document.getElementById will find nothing.
Source Link
Dylan Cristy
  • 12.8k
  • 3
  • 32
  • 72

You need to put quotes around the call to button_click() in your input's onCLick (and you don't need the semi-colon):

<input type="checkbox" onClick="button_click()">

In general, for any attribute of an HTML element, you have to enclose the value in quotes.