Quiero agregar un detector de eventos a una lista de objetos, pero cuando uso el siguiente código, funciona así. la función solo ocurre una vez cuando ejecuto la aplicación (sin hacer clic en el elemento) y luego deja de funcionar. 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