How to compare input Value with Array Name in Javascript [duplicate]

Question

I'm looking at creating a theme Randomizer by having menu dropdowns of categories. Each category has an associated array of items. For example, I've got an array full of mammals, and if a user chooses Mammal from the drop-down, they get a random mammal from the mammal array.

I can do it with a bunch of if statements, checking if a value is mammal, use the mammal array. The problem is there will be a lot of categories/arrays. So I'm trying to find a way to get the value, and then grab the array with the same name.

Here is the working code just using if statements:

<form class="firstItem">
        <select name="firstName" id="firstName">
            <option value="animals">---Animals---</option>
            <option value="mammals">Mammals</option>
            <option value="insects">Insects</option>
            <option value="birds">Birds</option>
            <option value="reptiles">Reptiles</option>
            <option value="fish">Fish/Aquatic</option>
            <option value="prehistoric">Prehistoric</option>
        </select>
    </form>
    <button class="button" id="submitBtn" onclick="submit()">Submit</button>

    <div class="results">
        <p id="resultsp"></p>
    </div>

<script>
    var mammals = ["Cow", "Horse", "Pig", "Donkey", "Elephant"];

    var insects = ["Weevil", "Hercules Beetle", "Ladybug", "Tarantula", "Moth"];

    function submit() {
        var firstName = document.getElementById("firstName");
        var firstTemp = firstName.value;
        var whatVar;

        if (firstTemp == "mammals") {
            whatVar = mammals.slice(0);
        } else if (firstTemp == "insects") {
            whatVar = insects.slice(0);
        } 
        random_items(whatVar);

        var resultsp = document.getElementById("resultsp");
        resultsp.innerText = random_items(whatVar);

        function random_items(firstName)
        {
            return whatVar[Math.floor(Math.random()*whatVar.length)];
        }
    }
</script>

I'd like to replace all the if statements with something that says whatever the value of firstName is, grab that variable.

I've tried replacing all the if statements with:

var whatVar = firstTemp;

but as firstTemp is a value, it treats it like a String, so if mammals is chosen it'll spit out one letter of the word mammals, rather than an item from the mammals array.

Am I going about this in a completely wrong way?

why not just const dictionnary = { "mammals" : ["Cow", "Horse", "Pig", "Donkey", "Elephant"], "insects":["Weevil", "Hercules Beetle", "Ladybug", "Tarantula", "Moth"]}; const whatVar = dictionnary[firstTemp]; ? — Julien Barrois
– Julien Barrois, Commented Jun 11, 2019 at 15:46
That totally works, thanks so much for your help, Julien, I appreciate it! — Tyler B
– Tyler B, Commented Jun 11, 2019 at 16:15
by the way, you've got a type in your random_items function as the input paremeter is not used at all. It works because the function is defined whithin submitand captures the variable whatVar — Julien Barrois
– Julien Barrois, Commented Jun 11, 2019 at 16:53
See the linked answer and stackoverflow.com/questions/10953303/… that this is a dupe of. Julien's suggestion is the right thing. The smallest change would have been to use window[whatVar] — Ruan Mendes
– Ruan Mendes, Commented Jun 11, 2019 at 17:59
Thank you both Julien and Juan. I didn't notice the original question when I was looking, thanks for marking as duplicated. I'm fairly new to stackoverflow, should I just delete the question? — Tyler B
– Tyler B, Commented Jun 12, 2019 at 17:20

jenish · Accepted Answer · 2019-06-11 16:49:20Z

0

try this for what you want to do. it's easy by the eval() function. I think its work for you!

<form class="firstItem">
      <select name="firstName" id="firstName">
        <option value="animals">---Animals---</option>
        <option value="mammals">Mammals</option>
        <option value="insects">Insects</option>
        <option value="birds">Birds</option>
        <option value="reptiles">Reptiles</option>
        <option value="fish">Fish/Aquatic</option>
        <option value="prehistoric">Prehistoric</option>
      </select>
    </form>
    <button class="button" id="submitBtn" onclick="submit()">Submit</button>

    <div class="results">
      <p id="resultsp"></p>
    </div>

    <script>
      var mammals = ["Cow", "Horse", "Pig", "Donkey", "Elephant"];

      var insects = ["Weevil", "Hercules Beetle", "Ladybug", "Tarantula", "Moth"];

      function submit() {
        var firstName = document.getElementById("firstName");
        var firstTemp = firstName.value;
        var whatVar = eval(firstTemp).slice(0);

        random_items(whatVar);

        var resultsp = document.getElementById("resultsp");
        resultsp.innerText = random_items(whatVar);

        function random_items(firstName) {
          return firstName[Math.floor(Math.random() * whatVar.length)];
        }
      }
</script>

Only you have to add this line where ever you want to convert string to a variable

eval(firstTemp).slice(0);

answered Jun 11, 2019 at 16:49

jenish

1812 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ruan Mendes Over a year ago

eval is usually avoided when there's a simple workaround. In this case, a window[whatVar] would have worked. See stackoverflow.com/questions/86513/…

Collectives™ on Stack Overflow

How to compare input Value with Array Name in Javascript [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related