How to define functions in script block?

[sensor-freak]

Hi,

is it possible to define (simple) functions in the document and/or the onInit code block?

I'd like to add an onClick handler to a div element in the HTML. Something like (in onInit):

function showOverlay() {
  document.getElementById("overlay").style.display = "block";
}
function hideOverlay() {
  document.getElementById("overlay").style.display = "none";
}

with that in HTML/SVG document:

<div class="background">
  <div class="box" id="BH7 1" onClick="showOverlay()"><span class="boxvalue"></span> °C</div>
  ...
</div>
<div id="overlay" onclick="hideOverlay()">
  ...
</div>

In the browser console I only get an error:

Uncaught ReferenceError: showOverlay is not defined
    at HTMLDivElement.onclick (geothermal-boreholes?editPanel=6&orgId=1&from=now-20d&to=now:1)

Thank you!

[ZuperZee]

Hello @sensor-freak.

You can't define functions in the html document, but you are able to add functions in onInit and onRender.

There are some examples at https://github.com/gapitio/gapit-htmlgraphics-panel/tree/main/examples/simple-example on how to add click events and such.

The easiest way to add what you're doing is to set the event in onInit instead of the html document.

const overlayElt =  htmlNode.getElementById("overlay");
const boxElt =  htmlNode.getElementById("BH7 1");

function showOverlay() {
  // htmlNode instead of document
  overlayElt .style.display = "block";
}
function hideOverlay() {
  overlayElt .style.display = "none";
}

overlayElt.onclick = hideOverlay;
boxElt.onclick = showOverlay;

Haven't tested the code above, let me know if it sorts out

I would suggest to use a bundler https://github.com/gapitio/htmlgraphics-svg-bundler-template which makes it easier developing.

[sensor-freak]

Yes, it works.

Thank you very much!