0

First of all, I'm sorry if this question has been asked a lot. I have tried to look for a solution and phrase my question in ten different ways, but I still can't find anything that applies to my question. I am fairly new to coding javascript, so I'm not entierly sure what to search for either.

So my situation is this:

I'm building an app that has a number of popups that will be displayed. I'm writing in MVC format. 

function showPopup(whichPopup){
   let mainPage = document.getElementById('mainPage');
   let html = '';

      if (whichPopup == 'report'){
          popupReport();
      }
}

The popupReport() function returns the popup content/HTML, and then the rest of my showPopup() function makes the popup. The whichPopup attribute is 'report' in this case.

This works fine for now, but I'm in the process of adding more popup types, and instead of having multiple if-statements regarding the content, I would like to run the function that is relevant to the string coming from whichPopup.

Sidenote: the string coming from whichPopup is not capitalized and later in this writeup attempt to call it with the string capitalized. In my code I have written functions that capitalize it and send a different value, but I just simplified it here. In other words, capitalization is not the issue.

I was thinking about making a fetchPopupContent(whichPopup) function, which would run the corresponding function, f.ex. popupReport() , but I cannot seem to find out how to do it.

The most basic case I tried was to make a variable like this:

var popupContent = 'popup' + whichPopup + '();';

But I couldn't find out how to call on it.

I also tried to make an array with whichPopup as the value of the only array slot, and call on it like this:

function fetchPopupContent(whichPopup){
    var popupType = {
        'selectedType' : whichPopup,
    }

    popupType['selectedType']();

}

This didn't work either, and the error I got was "cannot read property of 'selectedType'". I also tried the same code without the **'**s.

Any ideas as to how I can define which function to call?

Hyperwave
  • 123
  • 7
  • I fixed your last attempt like this: `function fetchPopupContent(whichPopup) { var popups = { popup1: function() { alert('POPUP 1'); }, popup2: function() { alert('POPUP 2'); } }; popups[whichPopup](); } fetchPopupContent('popup1');` – Hero Qu Dec 09 '19 at 13:32
  • I have no idea, why @Quentin points you to an "eval" answer. Arrays work fine for you problem. See here: https://jsfiddle.net/xbtLgpmn/ – ceving Dec 09 '19 at 13:34
  • 1
    @ceving — The accepted answer on the duplicate question recommends the use of arrays or objects. – Quentin Dec 09 '19 at 13:36

0 Answers0