0

I have a page with a singular modal and a few different modal bodiess. One modal to view an uploaded ID, one modal to view an order, one view to upload an ID, and one modal to change account info. I originally had several different functions set up to do basically the same thing in terms of opening the modal, so I refactored my code to use one function to open the modal, and I pass the name of the modal variable and the text content for the header.

Here's the situation: Two of the four modals work. I can't pass the name of the modal as a string, or else I get undefined in the function. So I passed it without quotes, and it works for the order modal and the upload modal, but for some reason it won't work with the other two modals.

Here's the show modal function

function showModal(name, header) {
  // get modal
  let modal = document.getElementById("modal");
  // show base modal
  modal.style.display = "block";
  // get modal header
  const modalHeader = document.getElementById("modalH1");
  modalHeader.textContent = header;
  // get upload modal
  const uploadModal = document.getElementById("uploadModal");
  // get view id modal
  const viewIdModal = document.getElementById("viewModal");
  // get view order modal
  const orderModal = document.getElementById("orderModal");
  // get account info modal
  const accInfoModal = document.getElementById("accountInfoModal");
  // get all modal body elements
  const modalBodies = document.getElementsByClassName("modal-body");
  // create array of modal bodies
  const bodies = Array.from(modalBodies);
  // loop through modal bodies and hide them
  bodies.forEach((body) => {
    body.style.display = "none";
  });
  // show desired modal
  name.style.display = "block";
}

Here's me calling the function and it working, part 1

// function to open upload ID modal
function openUploadID() {
  showModal(uploadModal, "Age Verification");
}

Part 2

// show modal
  showModal(orderModal, header);

But this doesn't work for some reason?

// function to open account info modal
function openAccountInfo() {
  showModal(accInfoModal, "AccountInfo");
}

When it doesn't work, I get the following error: "Uncaught ReferenceError: accInfoModal is not defined"

YungNoey
  • 53
  • 5
  • Well, you didn't define `accInfoModal`, at least in the code you posted? – Bergi Aug 16 '20 at 21:35
  • it's defined in showModal. I didn't define order modal or upload modal in the other two places I called showModal and I didn't get a reference error for either of them, both of them work. I would understand if I needed to define it in the function that calls showModal, but I didn't need to do that for the other two occasions, hence my confusion. – YungNoey Aug 16 '20 at 22:27
  • But that's a local variable declaration *inside* `showModal`, and it's not in scope in `openAccountInfo` where you are using it. Yes, you need to define it inside `openAccountInfo`, and pass the element to `showModal`. (Notice that you should rename the `name` parameter to `element` - it's not a name (string) but a reference to an element). – Bergi Aug 16 '20 at 22:39
  • 2
    "*I didn't need to do that for the other two occasions, hence my confusion*" - ah, I see now. This is because [dom elements with ids implicitly declare global variables](https://stackoverflow.com/q/3434278/1048572), but you should not rely on that feature. It did not work for `accInfoModal` because there the id `accountInfoModal` doesn't match the variable name you used. – Bergi Aug 16 '20 at 22:42
  • AHH! Thanks for the explanation. I understand now. I was aware of ways I could potentially change it / fix it, I just was curious and confused as to why this was working for 2/4 of the times I tried it. – YungNoey Aug 16 '20 at 22:47

0 Answers0