0

I want to add an event listener to a list of objects but when i use the following code it works like this. the function only happens only one time when i run the app ( without clicking on the element) and then it stops working. js :

             const checkIcons = document.getElementsByClassName("checkIcon");
             var checkIconFunction = function(img){
                
                console.log(img.src)
                var filename = img.src.replace(/^.*[\\\/]/, '');
                console.log(filename)
                if (filename == "cheack-icon.svg" ){
                    img.src = "../svg/color/cheack-icon-filled.svg";
                }else{
                    img.src = "../svg/color/cheack-icon.svg";
                };
                
            };
            Array.from(checkIcons).forEach(function(element) {
                element.addEventListener('click', checkIconFunction(element));
            });

html:

         <section class="section" id="activity-table">
            <h2 id="activity-label">Activity:</h2>
            
            <table class="table">
                <tr>
                    <th>
                        time
                    </th>
                    <th>
                        directory
                    </th>
                    <th id="selected-boolean">
                        select
                    </th>
                    
                </tr>
                
                <tr class="row">
                    <td>
                        <span>19 May</span>
                    </td>
                    <td>
                        <span>ali/ali/ali</span>
                    </td>
                    <td>
                        <img  id="check-icon" class="icon checkIcon" src="../svg/color/cheack-icon.svg" width="20" height="20">
                    </td>
                </tr>
                <tr class="row">
                    <td>
                        <span>19 May</span>
                    </td>
                    <td>
                        <span>ali/ali/ali</span>
                    </td>
                    <td>
                        <img  id="check-icon" class="icon checkIcon" src="../svg/color/cheack-icon.svg" width="20" height="20">
                    </td>
                </tr>
            </table>
        </section>

i

mohaka
  • 23
  • 6
  • `addEventListener` expects a function as its second argument. `checkIconFunction(element)` is not a function; it is `undefined`. Please read the documentation on [`addEventListener`](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) and on [functions](//developer.mozilla.org/docs/Web/JavaScript/Reference/Functions). Related: [In JavaScript, does it make a difference if I call a function with parentheses?](/q/3246928/4642212). – Sebastian Simon Feb 25 '22 at 12:48
  • Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of adding several event listeners — it’s more maintainable and applies to dynamically added elements. See [the tag info](/tags/event-delegation/info) and [this Q&A](/q/1687296). Use the [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback): `addEventListener("click", ({`[`target`](//developer.mozilla.org/docs/Web/API/Event/target)`}) => { const img = target.closest(".checkIcon"); if(img){ checkIconFunction(img); } });`. – Sebastian Simon Feb 25 '22 at 12:50

0 Answers0