How to use two dropdown menus to select variables for JavaScript

April 30, 2022

Let me start off with I am bad at JavaScript. I am taking a course for front-end development that ended up being self-taught with the extra stress of deadlines. I have to make a alert that pops up after two options to fight that gives the results of the fight (script.js was provided).

When I select the two contestants I can not figure out how to get the function to use the data in the script based on which two were selected.

Right now when I click the button I just get

"contestant_1 vs contestant_2"

and an error in the console saying

Uncaught TypeError: contestant_1.attack_power is not a function

File index.html

<body>
    <form>
        <select name="contestant_1" id="contestant_1">
            <option value="mario_world_mario">Mario</option>
            <option value="mario_world.luigi" selected="">Luigi</option>
            <option value="mario_world.peach">Peach</option>
            <option value="mario_world.bowser">Bowser</option>
        </select>
        <select name="contestant_2" id="contestant_2">
            <option value="mario_world.mario">Mario</option>
            <option value="mario_world.luigi">Luigi</option>
            <option value="mario_world.peach">Peach</option>
            <option value="mario_world.bowser" selected>Bowser</option>
        </select>
        <input type="button" value="Battle" onclick="mario_world.boss_battle(contestant_1, contestant_2);">
    </form>

    <script type="text/javascript" src="script.js"></script>
</body>

File script.js

var mario_world = {
  mario: {
    name:"Mario",
    description:"Small and jumpy. Likes princesses.",
    celebration: "Mario wins and does a little dance",
    height: 10,
    weight: 3,
    speed: 12,
    attack_power: function() {
      return this.weight * this.speed;
    }
  },

  bowser: {
    name:"Bowser",
    description:"Big and green, Hates princesses.",
    celebration: "Bowser wins and does a big roar",
    height: 16,
    weight: 6,
    speed: 4,
    boost: 0,
    attack_power: function() {
      return this.weight * (this.speed + this.boost);
    }
  },

  luigi: {
    name: "Luigi",
    desciption: "Mario's Brother. Wears green.",
    celebration: "Luigi wins and gives a thumbs up",
    height: 13,
    weight: 3,
    speed: 12,
    attack_power: function() {
      return this.weight * this.speed;
    }
  },

  peach: {
    name:"Princess Peach",
    description: "Always getting captured",
    celebration: "Peach wins and twirls around",
    height: 13,
    weight: 2,
    speed: 16,
    attack_power: function() {
      return this.weight * this.speed;
    }
  },


  boss_battle: function(contestant_1, contestant_2) {
    alert(contestant_1.name + " vs " + contestant_2.name);
    if (contestant_1.attack_power() > contestant_2.attack_power()) {
      alert(contestant_1.celebration);
    } else {
      alert(contestant_2.celebration);
    }
  }
}

>Solution :

The arguments you’re passing to the boss_battle function (contestant_1, contestant_2) are strings, and you cannot use them to access the object properties.

Consider passing the names directly in your select options, and then accessing the various properties of this

var mario_world = {
  mario: {
    name:"Mario",
    description:"Small and jumpy. Likes princesses.",
    celebration: "Mario wins and does a little dance",
    height: 10,
    weight: 3,
    speed: 12,
    attack_power: function() {
      return this.weight * this.speed;
    }
  },

  bowser: {
    name:"Bowser",
    description:"Big and green, Hates princesses.",
    celebration: "Bowser wins and does a big roar",
    height: 16,
    weight: 6,
    speed: 4,
    boost: 0,
    attack_power: function() {
      return this.weight * (this.speed + this.boost);
    }
  },

  luigi: {
    name: "Luigi",
    desciption: "Mario's Brother. Wears green.",
    celebration: "Luigi wins and gives a thumbs up",
    height: 13,
    weight: 3,
    speed: 12,
    attack_power: function() {
      return this.weight * this.speed;
    }
  },

  peach: {
      name:"Princess Peach",
    description: "Always getting captured",
    celebration: "Peach wins and twirls around",
    height: 13,
    weight: 2,
    speed: 16,
    attack_power: function() {
      return this.weight * this.speed;
    }
  },


  boss_battle: function(contestant_1, contestant_2) {
    alert(this[contestant_1.value].name + " vs " + this[contestant_2.value].name);
    if (this[contestant_1.value].attack_power() > this[contestant_2.value].attack_power()) {
      alert(this[contestant_1.value].celebration);
    } else {
      alert(this[contestant_2.value].celebration);
    }
  }
}

<form>
<select name="contestant_1" id="contestant_1">
  <option value="mario">Mario</option>
  <option value="luigi" selected="">Luigi</option>
  <option value="peach">Peach</option>
  <option value="bowser">Bowser</option>
</select>
 <select name="contestant_2" id="contestant_2">
  <option value="mario">Mario</option>
  <option value="luigi">Luigi</option>
  <option value="peach">Peach</option>
  <option value="bowser" selected>Bowser</option>
</select>
<input type="button" value="Battle" onclick="mario_world.boss_battle(contestant_1, contestant_2);">
</form>