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=addeventlistener+form+input+changes+javascript&gws_rd=cr,ssl&ei=9dj_VI6KKsGwUYnkgLgI

[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>