jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.41k stars 713 forks source link

Adding event listener to button inside drawflow node #846

Closed alexis084 closed 3 months ago

alexis084 commented 3 months ago

I'm having trouble attaching an event listener to a button that I have created inside a drawflow node. For my use case, I need to show a subset of object data in each node and then show the full object data onclick of the "Show All Info" button. However, when trying to retrieve the button element like so var showAllInfoBtn = document.getElementById('showAllInfoBtn); the variable showAllInfoBtn is always null.

I'm creating my nodes like so:

   var html = `
                    <div class="event-data">
                        <div class="title-box">
                            <p>Team: ${object.Attribute}</p>
                        </div>
                        <p>Date: ${object.Attribute}</p>
                        <p>Location: ${object.Attribute}</p>
                        <p>VectorId: ${object.Attribute}</p>
                        <button type="button"
                            class="menu-button"
                            id="showAllInfoBtn"
                            data-index="${i}">Show All Info</button>
                    </div>
                `;
     editor.addNode("EventNode", 1, 1, curX, curY, 'test-node1', {}, html);

And attaching my event listener:

  var showAllEventInfoButton = document.getElementById('showAllInfoBtn');
        console.log("showAllEventInfoButton: " + showAllEventInfoButton); // debug
        showAllEventInfoButton.addEventListener('click', function () {
            var index = parseInt(this.dataset.index);
            showAllEventInfo(index);
        });

By inspecting element I've confirmed that the html in the html variable is being added to the DOM. So, I'm not sure why showAllEventInfoButton is always null. Is there another, more standard way, of adding buttons and attaching event listeners to them inside drawflow nodes?

Apologizes if this is more of a js question than a drawflow question but my intuition says that there must be a more standard way to add buttons to drawflow nodes that I am just not aware of.

Thank you for your time and for creating such an awesome project!

alexis084 commented 3 months ago

Solved my own issue. Had nothing to do with drawflow.