JavaScript: How to make an alert dialog appear when clicking an SVG element?

Question

I am having trouble getting an event listener to work for click event's on SVG elements in my web page.

Right now, it is displaying the first dialog whenever the page loads (the title of cercle ). What I want it to do is display the alert message only when that particular SVG element (or section) of the SVG image is clicked. I also what the alert to display if the an SVG element is clicked again.

Please help as I am really stumped on this one.

The code I'm currently using is:

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

cercle.addEventListener("click" , showCercleTitle());
path.addEventListener("click" , showPathTitle());
rectangle.addEventListener("click" , showRectTitle());

The id and references are correct, as it is displaying the correct titles, but only once and for the cercle and then nothing else.

Thank you!

Answer 1

If I understand your question correctly, the issue with your code is the () after each of your event handlers, when passing then to addEventListener() . Take for instance the cercle SVG element and showCercleTitle() handler:

cercle.addEventListener("click" , showCercleTitle()); //<-- () causing the issue

By passing showCercleTitle() with () , you're calling the showCercleTitle function immediately when passing it to addEventListener() as the click event handler. This means that the result of that call to showCercleTitle() (which is probably undefined ?) is what will be used as the handler for the click event on the SVG element. To resolve this issue, consider removing the () on all event handler assignments, as shown below:

 const cercle = document.getElementById('leCercle'); const rectangle = document.getElementById("leRect"); const path = document.getElementById("laCourbe"); /* Define callback functions for each alert/dialog */ function showCercleTitle() { alert('showCercleTitle') } function showPathTitle() { alert('showPathTitle') } function showRectTitle() { alert('showRectTitle') } /* Add each defined callback as click event listener to respective svg elements. Avoid adding the () after each handler when passing to addEventListener() */ cercle.addEventListener("click", showCercleTitle); path.addEventListener("click", showPathTitle); rectangle.addEventListener("click", showRectTitle); 

 <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> </svg>