How can I get my script to read a subscript output as a preset variable name

Question

I want the output of my string to be read as a variable and not printed as text

I have tried to research the problem, but as an introductory student I can't really find what i'm looking for

}

function showDetailedView(currentDiv) {
    var popframe = document.getElementById(currentDiv);
    var picture = currentDiv.substring(0, currentDiv.length - 5);
    var pic1 = "Arachnobot mk II";
    var pic2 = "Tyson Droid";
    var pic3 = "Dancer Bot";
    var pic4 = "Skinny Fingers";
    var pic5 = "Abomination";
    var pic6 = "Dog";
    var pic7 = "Smart Scratch";
    var pic8 = "Soccer Bots";
    var pic9 = "Butler Bot";
    var pic10 = "Peanut Gallery";
    var pic11 = "Statue Bot";
    var pic12 = "Gang Boys"; 
    var pic13 = "Nuclear Machine of Mass Destruction";
    var pic14 = "Eye Roll Droid";
    var pic15 = "Pet";
    popping = popframe.id;
    popframe.id = "popout";
    popframe.innerHTML = "<br /><TABLE><TR><TH rowspan='3'><img 
src='http://" + window.location.hostname + 
                            "/aprilla/"+currentDiv.substring(0, 
currentDiv.length - 5)+".jpg' width='250'><TH align='left'>Robot Type: 
<TH align='left'>" +
                            currentDiv.substring(0, currentDiv.length - 
5)+ "<TR><TH align='left'>Description: <TH align='left'> 'They do robot 
stuff' <TR></TABLE> ";

    var nameholder = "popout";
    var unpopped = document.getElementById(nameholder);
    unpopped.onmouseout = hideDetailedView;

}

I expected currentDiv.substring(0, currentDiv.length - 5)+ to output the value pic1, pic2, pic3, etc. based on the image that I'm mousing over, then, based on the possible outputs, it would correspond to one of the hard-coded variable names to produce the final product of Robot Type: Arachnobot mk II if hovering over pic1, or Robot Type: Butler Bot if hovering over pic 9. Instead of this result it just outputs the text pic1, pic2, pic3, etc. and doesn't convert it into the corresponding variables.

score 0 · Answer 1 · answered May 25 '19 at 05:39

substring returns a string. Instead use window[currentDiv.substring(0, currentDiv.length - 5)].

var id = "pic1withsometext";
var pic1 = "lorem";

document.querySelector('p').innerHTML = window[id.substring(0,4)];

<p>Some random paragraph</p>

var id = "pic1withsometext";
var pic1 = "lorem";

// Does not work
document.querySelector('p').innerHTML = id.substring(0,4);

<p>Some random paragraph</p>

See - Convert string to variable name in JavaScript

mattdaspy · Answer 2 · 2019-05-25T06:01:13.453

I 've pointed out a few things over you code, hope it can help you to understand maybe what' s going wrong on it:

function showDetailedView(currentDiv) {
    var popframe = document.getElementById("currentDiv");
    //Put quotes when finding an ID, if not, 
    //the function will try to return a variable
    var picture = window[currentDiv.substring(0, currentDiv.length - 5)]; 
    //Instead of just calling it, add
    // "window[currentDiv.substring(0, currentDiv.length - 5)]" 
    // as "substring" just returns a string

var pic1 = "Arachnobot mk II";
var pic2 = "Tyson Droid";
var pic3 = "Dancer Bot";
var pic4 = "Skinny Fingers";
var pic5 = "Abomination";
var pic6 = "Dog";
var pic7 = "Smart Scratch";
var pic8 = "Soccer Bots";
var pic9 = "Butler Bot";
var pic10 = "Peanut Gallery";
var pic11 = "Statue Bot";
var pic12 = "Gang Boys";
var pic13 = "Nuclear Machine of Mass Destruction";
var pic14 = "Eye Roll Droid";
var pic15 = "Pet";
popping = popframe.id;
popframe.id = "popout";

//Below, use single backward quotes so you can maintain
// the original HTML structure inside the variable, because it's
// better for viewing what's inside and finding and correcting
// issues like closing and opening tags
popframe.innerHTML = `
              <br>
        <TABLE>
          <TR>
            <TH rowspan="3">
              <img src="http://" ` + window.location.hostname + ` "/aprilla/ "` + picture + ` ".jpg" width="250">
              <TH align="left">Robot Type:
                <TH align="left">` + picture + //The var 'picture' already
                                               // has its value declared, 
                                               // so just substitute it
                                               // instead of writing it 
                                               // all again (makes your 
                                               // code cleaner and shorter)
                                 `
                </TH>
              </TH>
            </TH>
          </TR>
          <TR>
            <TH align="left">Description:
              <TH align="left">
                They do robot stuff
              </TH>
            </TH>
          </TR>
        </TABLE>
              `;

var unpopped = document.getElementById("popout");
//You don't need another variable to declare an ID inside the event getElementById

unpopped.onmouseout = hideDetailedView;
//hideDatailedView isn't declared in this code

}

How can I get my script to read a subscript output as a preset variable name

2 Answers2