Keep Variable State with JS Constructors

[sniperman]

I have started to work with JS after a long hiatus, and wanted to create a simple logic to store values and hold their state on each call back.

I attempted to use Constructors. I also attempted to use an Object/Function but that did returned "object is not defined" often.

The code below works to return a new value but I would like to include the JavaScript within the FORM element into the SCRIPT section and create a function/constructor/prototype and call the function from within the FORM element.

I know there are better methods than mine to do this, and keep the array state so each callback can add to the array value.

  	        var monster = {
		arms: 0,
		legs: 0,
		bodies: 0,
		colors: 0,
		hair: 0,
		/* AddAppendage: function() {  // randomly add one of the appendages
				var x = "which appendage";
				return x;  

		}, */
        
	};
        alert(Object.getOwnPropertyNames(monster)[Math.floor(Math.random()*5)]); // returns one of the appendages



<input name="input" value="enter a number" onfocus="this.value=''" onchange="monster.arms+=parseInt(this.value);alert('this monster has ' + monster.arms + ' arms')" ></input>

[Beverleyh]

... I would like to include the JavaScript within the FORM element into the SCRIPT section and create a function/constructor/prototype...

I'm not sure, but is this what you're looking for? http://www.w3schools.com/jsref/event_onchange.asp

You might find more information here https://www.google.co.uk/search?q=ad...6KKsGwUYnkgLgI

[sniperman]

That did help thanks.

I attempted to improve the code myself (it has been a year since I coded) and managed to find a solution to remove the excess JS code in the HTML event listeners.

I would love to learn how I could modify the JS code so the "monster" array becomes integrated into a Prototype and take "monster" variable out of Global Scope.

<script type="text/javascript">

	var monster = {
		arms: 0,
		legs: 0,
		heads: 0,
		bodies: 0,
		colors: 0,
		hair: 0,  };

	function appendageChoice(values, type) { // pass either the form option for appendage or a number value
		
		/*** VALIDATE VALID USER OPTIONS BEFORE GO ***/
		userchoice = parseInt(document.getElementById("uservalue").value); // user entered a number
		var elt = document.getElementById("appendage");
		userappendage = elt.options[elt.selectedIndex].text; // that took an hour to achieve	
			
			if (userchoice >= 0 && userchoice <=5 ) { // validate whether choice is an integer
			  if (elt.options[elt.selectedIndex].selected) { // validate whether option is selected
			      monster[userappendage] += parseInt(userchoice); // add the user value to the global Monster Prototype
				  alert(userappendage + ' ' + userchoice + ' the Monster Prototype for ' + userappendage + ' now stands totally at ' + monster[userappendage]); //
				
	
		/*** CHANGE STATE IN HTML ***/
			var updatedoc = document.getElementById(userappendage);
			updatedoc.innerHTML = parseInt(monster[userappendage]);
					}
				}
	}

</script>

<form name="appendagechoice" id="appendagechoice" onsubmit="appendageChoice(this);return false;">
<input name="uservalue" id="uservalue" value="enter a number" onfocus="this.value=''"></input>
<select name="appendage" id="appendage">
  <option value="arms">arms</option>
  <option value="legs">legs</option>
  <option value="heads">heads</option>  
  <option value="bodies">bodies</option>
  <option value="colors">colors</option>
  <option value="hair">hair</option>  
</select>
<input type="submit" value="create"></input>
</form>

<div id="output">
<p>this MONSTER now has</p>
<ul>
  <li><span id="arms"></span>Arms</li>
  <li><span id="legs"></span>Legs</li>
  <li><span id="heads"></span>Heads</li>
  <li><span id="bodies"></span>Bodies (one body can have many arms, legs, heads)</li>
  <li><span id="colors"></span>Colors</li>
  <li><span id="hair"></span>Hair Type</li>
 </ul>
</div>