0

Sorry for the title i don't know how to explain it differently. I created a popup window, there is an "x" close button on right top, advanced and close button on mid bottom. After clicking and replacing text in HTML those newly created buttons just doesn't work.

    let mda = document.getElementById("popup");

    document.addEventListener("DOMContentLoaded", () => { //show the pop up after loading the stie
       mda.style.display = "block";
    });

    const adv = document.querySelector(".adv");    //Advanced button
    let mdc = document.querySelector(".popup-content");   //Pop up content block that changes

    adv.onclick = () => {
      mdc.innerHTML =
        '<span class="close"></span>' + ' ... ' +
        '<button class="back">Go back</button>' + 
        '<button class="closebtn">Go to site</button>'; //Here it creates same button as before
       
// I thought since it has the same class name it would work but it doesn't,
// tried with simple onclick function but it doesn't work either.

      const back = document.querySelector(".back");
      back.onclick = () => {
        mdc.innerHTML =
   
          '<span class="close"></span>' +
          '<button class="adv">Advanced</button>' + //creates adv button again but doesn't work
          '<button class="closebtn">Go to site</button>';
         
      };
    };
    
    const xbtn = document.querySelector(".close");
    const cbtn = document.querySelector(".closebtn");
    const close = () => {
      xbtn.onclick = () => {
        mda.style.display = "none";
      };
      cbtn.onclick = () => {
        mda.style.display = "none";
      };
    };
    close();

I tried everything I could come up with, adding onclick=() to the buttons, addEventListener instead of onclick functions... Also one weird thing that's happening is if i use getElementByClass or Id instead of query selector those close functions stops working... Please can someone guide me how am i supposed to do it correctly? BTW can't use any libraries.

Dano
  • 55
  • 6
  • 1
    [This post is basically the same question](https://stackoverflow.com/questions/30880757/javascript-equivalent-to-on/30880803) with a couple of different answers that might be helpful for you. – Alexander Nied Dec 18 '20 at 14:23
  • Thank you! Sorry i searched and couldn't find anything like that. I'll look into it. – Dano Dec 18 '20 at 14:27
  • 1
    No problem-- hope that helps; good luck! – Alexander Nied Dec 18 '20 at 14:28
  • 1
    At the time you call `document.querySelector(".close")` for instance, the button doesn't exist yet. Therefore `xbtn` is `undefined`, and you'll get a console error when trying to assign to `xbtn.onclick`. One way to fix this is to move all related code right after assigning to `.innerHTML`. A better way is to use event delegation. A different way to solve this is to have all buttons from the start and simply hide/show them as needed. –  Dec 18 '20 at 14:41
  • 1
    Regarding the other ways you tried, the function is called `.getElementsByClass()`; as the name implies, this returns a list of elements. `.getElementById` otoh, as the name implies, grabs an element by `id`, not class. –  Dec 18 '20 at 14:44
  • @ChrisG It exists before in the HTML, it gets remade once again and that's why it stops working? And about `getElement`, i realize what those does, i wonder tho why it doesn't work in that instance, `querySelector(".something")` is the same as `.getElementsByClass("something")` am i right? For some reason tho `getElementByClass` doesn't work but `querySelector` does... – Dano Dec 18 '20 at 14:57
  • 1
    You would need `.getElementsByClass("something")[0]` to get the first element. There is no `getElementByClass`. And if it gets remade, it's a brandnew element, and not the one stored in xbtn. –  Dec 18 '20 at 15:04
  • @ChrisG OH I SEE! so after changing HTML and creating the new element it would be [1]? – Dano Dec 18 '20 at 15:07
  • No, not at all. Like I said, `.getElementsByClass("something")` returns a list of elements. Even if there's only one in existence at the time the function is called, you still get a list. To access the first element you need to put [0] behind it (like with any iterable). To get the newly created element, you need to call `.querySelector(".something")` *again*, *after* the element was created. That is why I told you to move the relevant code inside your handler function, after you change `.innerHTML` –  Dec 18 '20 at 15:11
  • @ChrisG Ok got it now! Thank you! – Dano Dec 18 '20 at 15:12

0 Answers0