Use of addEventListener in Widget HTML - they do not work

1

Hello,

I am trying one javascript and it works in my navegator, but not in Thinger.io.

I have put it into Thinger.io in a widget HTML.

I am suspecting that Thinger.io does not accept things like:

 window.addEventListener("load", function () {

//OR

document.addEventListener("click", function(event) {


//OR:

document.getElementById("Pista_44").addEventListener("click", function(event) {

(Because:
-I have one console.log into the <script> at the beggining and it works the firts time when open the website.
-I have one console.log into every one them (of the “addEventListener”) but they do not appear un my console when I click).

Could somebody tell me if we can use “addEventListener” in widgets HTML? If the answer is “yes, we can”, is there a specific way?

Thank you so much!

2

Hi @EBA,

Yeah, addEventListener works just as in any other webpage. Your issue may be caused by something else. Keep in mind that some events will not fire as is it not a full document, so your first example (window.addEventListener("load", function() {})) will not work.

With the second and third examples I have no issue. For this code I’m receiving response:

<div>
    <h3>Hello World from AngularJS directive!</h3>
    <p><strong>Source</strong> is {{source.device.id}}</p>
    <p><strong>Timestamp</strong> is: {{ts}}</p>
    <p><strong>Value</strong> is: {{value}}</p>
    
    <button id="myButton">Click me!</button>

</div>


<script>
    // JavaScript code
document.addEventListener("click", function(event) {
    console.log('Document clicked!');
    console.log('Mouse coordinates:', 'X:', event.clientX, 'Y:', event.clientY);
});

    
    document.getElementById('myButton').addEventListener('click', function() {
        console.log('Button clicked! Hello from the console.');
    });
</script>

screen.20231127-101937
screen.20231127-101937720×466 32.9 KB

1 Like
3

Thank you so much! I will try it and I will tell you :slight_smile:

4

Hello!

Finally, I have ‘solved’ it by putting into <a> an “Onclick”. Example:

         <a href = "" onclick="showContainerInfoMap('showContainerInfoMapId','Pista_34')">
             <path
                class = "path-tenis-court-map-svg"
                d="M 78.589868,45.028314 C 83.000867,60.652007 87.411867,76.275699 91.822866,91.899392 100.27448,89.7444 108.72609,87.589408 117.1777,85.434416 113.77685,70.181112 110.376,54.927809 106.97515,39.674505 97.513389,41.459108 88.051629,43.243711 78.589868,45.028314 Z"
                id="Pista_34"
                inkscape:connector-curvature="0"
                inkscape:label="#Pista 34">
                <title
                   id="title34">Pista 34</title>
            </path>
        </a>

Thank you for all @jaimebs :slight_smile: