Results 1 to 3 of 3

Thread: Keep Variable State with JS Constructors

  1. #1
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default Keep Variable State with JS Constructors

    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.

    Code:
      	        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>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    ... 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
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

    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.

    Code:
    <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>
    Code:
    <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>

Similar Threads

  1. Replies: 7
    Last Post: 06-13-2011, 07:18 AM
  2. Memorize the state
    By Titanesk in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-07-2011, 06:08 PM
  3. Resolved 3rd state of 3 state buttons script not working
    By hivemind in forum JavaScript
    Replies: 1
    Last Post: 05-01-2009, 03:34 PM
  4. constructors
    By craigtb in forum Java
    Replies: 13
    Last Post: 01-31-2007, 12:12 AM
  5. CSS Help: Onload Down state
    By SPSPilot in forum CSS
    Replies: 1
    Last Post: 04-17-2006, 10:11 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •