javascript toggle click is not working in addEventListener

Question

I'm trying to make a toggle click in addEventListener. but it is works only the first click and nothing change by more clicking. it shouold work invisible to visible and visible to invisible.

it is working now invisible to visible only. not working visible to invisible as return.

Code:

 document.getElementById("item-table").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("cancel-icon")) { tgt.closest("tr").remove(); } if (tgt.classList.contains("visibility-icon")) { if (tgt.src == "icon/visible.png") { tgt.src = "icon/invisible.png"; tgt.closest(".visibility-tr").style.color = "#ccc"; tgt.closest(".visibility-tr").getElementsByTagName("input")[0].style.background = "#eee"; tgt.closest(".visibility-tr").getElementsByTagName("input")[0].style.color = "#ccc"; } else { tgt.src = "icon/visible.png"; tgt.closest(".visibility-tr").style.color = "#000"; tgt.closest(".visibility-tr").getElementsByTagName("input")[0].style.background = "#fff"; tgt.closest(".visibility-tr").getElementsByTagName("input")[0].style.color = "#000"; } } });

 <table id="item-table"> <tr> <td><strong>Name: </strong></td> <td><input type="text"></td> </tr> <tr class="visibility-tr"> <td><strong>Unit: </strong></td> <td><input type="text"></td> <td><img src="icon/invisible.png" class="visibility-icon" height="25px"></td> </tr> <tr> <td><strong>Price: </strong></td> <td><input type="text"></td> </tr> <tr> <td><strong>In Stock: </strong></td> <td><input type="text"></td> </tr> </table>

Answer 1

The problem is that tgt.src contains the fully parsed and expanded URL, https://yourdomain.com/icon/visible.png , so the comparison always fails.

Use tgt.getAttribute("src") to get the attribute that hasn't been expanded.

 document.getElementById("item-table").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("cancel-icon")) { tgt.closest("tr").remove(); } if (tgt.classList.contains("visibility-icon")) { if (tgt.getAttribute("src") == "icon/visible.png") { tgt.src = "icon/invisible.png"; tgt.closest(".visibility-tr").style.color = "#ccc"; tgt.closest(".visibility-tr").getElementsByTagName("input")[0].style.background = "#eee"; tgt.closest(".visibility-tr").getElementsByTagName("input")[0].style.color = "#ccc"; } else { tgt.src = "icon/visible.png"; tgt.closest(".visibility-tr").style.color = "#000"; tgt.closest(".visibility-tr").getElementsByTagName("input")[0].style.background = "#fff"; tgt.closest(".visibility-tr").getElementsByTagName("input")[0].style.color = "#000"; } } });

 <table id="item-table"> <tr> <td><strong>Name: </strong></td> <td><input type="text"></td> </tr> <tr class="visibility-tr"> <td><strong>Unit: </strong></td> <td><input type="text"></td> <td><img src="icon/invisible.png" class="visibility-icon" height="25px"></td> </tr> <tr> <td><strong>Price: </strong></td> <td><input type="text"></td> </tr> <tr> <td><strong>In Stock: </strong></td> <td><input type="text"></td> </tr> </table>