I have 3 popups on the same page. I found a javascript code to close the div when clicked outside the div. The problem is when i add one it works when i add 2 or 3 none work. Is it possible to have all 3 on the same page. function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } // Prevents menu from closing when clicked inside document.getElementById("myPopup").addEventListener('click', function (event) { event.stopPropagation(); }); // Closes the menu in the event of outside click window.onclick = function(event) { if (!event.target.matches('.amount')) { var dropdowns = document.getElementsByClassName("tooltiptext"); var i; for (i = 0; i < dropdowns.length; i++) { var openmyPopup = dropdowns[i]; if (openmyPopup.classList.contains('show')) { openmyPopup.classList.remove('show'); } } } } function myFunctions() { var popup = document.getElementById("mypopup"); popup.classList.toggle("shows"); } // Prevents menu from closing when clicked inside document.getElementById("mypopup").addEventListener('click', function (event) { event.stopPropagation(); }); // Closes the menu in the event of outside click window.onclick = function(event) { if (!event.target.matches('.furbm')) { var dropdowns = document.getElementsByClassName("tooltipstext"); var i; for (i = 0; i < dropdownss.length; i++) { var openmypopup = dropdowns[i]; if (openmypopup.classList.contains('shows')) { openmypopup.classList.remove('shows'); } } } } function myFunctionss() { var popup = document.getElementById("mYpopup"); popup.classList.toggle("showS"); } // Prevents menu from closing when clicked inside document.getElementById("mYpopup").addEventListener('click', function (event) { event.stopPropagation(); }); // Closes the menu in the event of outside click window.onclick = function(event) { if (!event.target.matches('.furbc')) { var dropdowns = document.getElementsByClassName("toolstiptext"); var i; for (i = 0; i < dropdowns.length; i++) { var openmYpopup = dropdowns[i]; if (openmypopup.classList.contains('showS')) { openmypopup.classList.remove('showS'); } } } } } Code (JavaScript):
For the most part none of this looks like stuff that's even JavaScript's business any time over the past decade, but I'd have to see the markup being manipulated to say for certain. Without the HTML and CSS, this type of JS is pretty meaningless. You might also want to try giving them actual meaningful names, instead of variations of case.