1

so i am trying to create a html popup using CSS for styling and javascript for the popup motion. However, it's my first time using VS code to do it but somehow, it doesn't function.

Please help.

document.getElementById("open-popup-button");
document.addEventListener("click",function(){document.getElementsByClassName("popup")[0].classList.add("active")});

document.getElementById("dismiss-popup-button");
document.addEventListener("click",function(){document.getElementsByClassName("popup")[0].classList.remove("active")});
Rachel Ng Wei Ying
  • 11
  • 1
  • We need to see the relevant HTML and CSS. Also [don't use `getElementsByClassName()`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474). Also, are you getting any errors in your developer console (F12)? – Scott Marcus Jun 14 '22 at 15:40
  • Can you show your HTML with that button and popup? – User456 Jun 14 '22 at 15:40
  • The event listener should be attached to the element that you are getting by id, not to the whole document. `let openButton = document.getElementById("open-popup-button"); openButton.addEventListener("click",function(){document.getElementsByClassName("popup")[0].classList.add("active")}); let closeButton = document.getElementById("dismiss-popup-button"); closeButton.addEventListener("click",function(){document.getElementsByClassName("popup")[0].classList.remove("active")});` – dawalberto Jun 14 '22 at 15:43
  • Lines 1 and 3 of your code effectively do nothing. The scan the DOM for matching elements and then don't do anything with those element references. – Scott Marcus Jun 14 '22 at 15:45
  • @ScottMarcus no errors but the code that dawalberto suggested worked perfectly – Rachel Ng Wei Ying Jun 14 '22 at 15:48

0 Answers0