[FIXED] How to let my HTML input be used by my JavaScript function?

Issue

So I have set up many objects with my JavaScript, a HTML dropdown list so you can select which pokemon

As you can see I have tried to access the 'bulbasaur' object by using document.getElementById on a list which has a dropdown value of 'bulbasaur'. When I do console.log(mon) it prints 'bulbasaur' so I'm guessing I just can't access the object this way. Is there a workaround? Thanks

const base =10;
class Pokemon {
  constructor(name, shinyrate) {
    this.name = name;
    this.shinyrate = shinyrate;
  }
}
const bulbasaur = new Pokemon('Bulbasaur', base);

function shundoWild() {
  let mon = document.getElementById("list").value;
  let nowb = mon.shinyrate * ivCombinations(ivFloor.wild);
  let wb = mon.shinyrate * ivCombinations(ivFloor.weatherBoost);
  document.getElementById("print").innerHTML = ("The chance to get a SHUNDO " + mon.name + " wild catch is ~1/" + wb + " when weather boosted, or ~1/" + nowb + " when not weather boosted.")
}

<select id="list" onchange="shundoWild();">
  <option value="bulbasaur">Bulbasaur</option>
  <option value="ekans">Ekans</option>
</select>

Solution

Instead of making bulbasaur and ekans variables, make them properties of an object:

const characters = {
  bulbasaur: new Pokemon('Bulbasaur', base),
  ekans: new Pokemon('Ekans', base)
}

The you can access them by name:

  let name = document.getElementById("list").value;
  const mon = characters[name];

Answered By - terrymorse

Answer Checked By - Willingham (PHPFixing Volunteer)