adding options to DOM in object creator

JSFiddle

I am trying to make a list of monsters and be able to give them values such as stats and resources upon being slain. I thought the easiest way to do it would be with an object maker but I'm not sure how to properly implement the monsters into my html. How can I make it so that each new Monster object created will add itself to the select in the html?

function Monster(exp, gold, hp, atk, def, spd) {
    this.exp = exp;
  this.gold = gold;
  this.hp = hp;
  this.atk = atk;
  this.def = def;
  this.spd = spd;
  this.implement = function() {
    var monsterList = document.getElementById('monsterList');
    monsterList.createElement('OPTION');
  }
}

var fly = new Monster(1, 1, 5, 1, 0, 1);
var mouse = new Monster(2, 3, 10, 2, 0, 2);
var rat = new Monster(4, 5, 20, 4, 2, 2);
var rabidChihuahua = new Monster(6, 8, 35, 6, 1, 4);
var bulldog = new Monster(10, 14, 60, 10, 4, 1);

Answers


First, your method called implement is never executed. Second, createElement should be called under document object. See code modified below and find here a working JSFiddle:

function Monster(exp, gold, hp, atk, def, spd) {
    this.exp = exp;
  this.gold = gold;
  this.hp = hp;
  this.atk = atk;
  this.def = def;
  this.spd = spd;
  // Method definition
  this.implement = function() {
    var monsterList = document.getElementById('monsterList');
    var opt = document.createElement('OPTION'); // Creating option
    opt.innerText = 'Monster ' + exp; // Setting innertText attribute
    monsterList.appendChild(opt); // appending option to select element
  }
  // Method execution
  this.implement();
}

var fly = new Monster(1, 1, 5, 1, 0, 1);
var mouse = new Monster(2, 3, 10, 2, 0, 2);
var rat = new Monster(4, 5, 20, 4, 2, 2);
var rabidChihuahua = new Monster(6, 8, 35, 6, 1, 4);
var bulldog = new Monster(10, 14, 60, 10, 4, 1);

Quite simple, but you need name of Monster to show it in select tag

currentLvl = 1;
expNeeded = 10;

function Monster(name, exp, gold, hp, atk, def, spd) {
  this.exp = exp;
  this.gold = gold;
  this.hp = hp;
  this.atk = atk;
  this.def = def;
  this.spd = spd;

  //new property
  this.name = name;

  //get html list object
  var monsterList = document.querySelector('#monsterList');

  //create html option object
  var option = document.createElement('option');

  //assign value - will be triggered on selection change
  option.value = this.name;

  //assign display text - just a text to display
  option.textContent = 'Monster ' + this.name;

  //add to monsters list
  monsterList.appendChild(option);
}

var fly = new Monster('fly', 1, 1, 5, 1, 0, 1);
var mouse = new Monster('mouse', 2, 3, 10, 2, 0, 2);
var rat = new Monster('rat', 4, 5, 20, 4, 2, 2);
var rabidChihuahua = new Monster('rabidChihuahua', 6, 8, 35, 6, 1, 4);
var bulldog = new Monster('bulldog', 10, 14, 60, 10, 4, 1);

document.querySelector('#monsterList').onchange = function(event) {
  console.log(event.target.value);
}
<select id="monsterList">

</select>

Need Your Help

How to parse multiple XML data using Jquery?

javascript jquery xml jquery-mobile xml-parsing

I'm getting response in XML using Ajax call, i can parse the data but only a single data not multiple data elements, what i am getting in xml response is:

Updating EXTJS 4 Treepanel periodic

extjs refresh treepanel extjs4

I would like to create a Treepanel, which is updated once a second.