I have a class called "Game" and inside it, there's a property called "inventory" which invokes the "Inventory(id)" function where all the inventory functions are created and housed to clear clutter.
I've created a new object
var Game = new Game(body, mainElement, inventoryItems, statusElement);
(it should be self explanitory, the body is selecting the body tag, main element is my main area, status is a status element, and of course inventoryItems is the <ul> I'm using to append my items into.) - you can check the codepen for a better understanding.
The main code you need to help me
function Game(body, mainElement, inventoryItems, statusElement) {
this.body = body;
this.main = mainElement;
this.inventory = Inventory(inventoryItems);
this.status = statusElement;
}
function Inventory(y) {
this.element = y;
this.create = function(itemName, equippable, sellable) {
this.element.append(function(){
var item = '';
if (itemName.length > 0) {
item += "<li>" + itemName;
if (sellable) {
item += "<label>Sell<input type='checkbox' name='sell' onclick='javacript: confirmSell(this);' /></label>";
}
if (equippable) {
item += "<label>Equip<input type='checkbox' name='equip' onclick='javacript: equip(this);' /></label>";
}
}
return item;
}, this.element);
}
}
var Game = new Game(body, mainElement, inventoryItems, statusElement);
Game.inventory(create("Bronze Knife", true, true));
Game.inventory(create("Ramen Noodles", false, true));
Game.inventory(create("Boots w/da Fur", true, true));
Now, I get funny errors when I try calling the inventory(create(string, bool, bool));
It creates the first item, so at least I know "something" is going "somewhat" correctly, or I could be entirely wrong and deserve to just shut my computer down.
In chrome I'm told the Bronze Knife inventory.create is telling me undefined is not a function.
Any help is GREATLY appreciated
EDIT: link
Game.inventory is object (reference to Inventory object (add new before Inventory)) which contain method create, so you can call this method like this
.....
this.inventory = new Inventory(inventoryItems);
.....
var Game = new Game(body, mainElement, inventoryItems, statusElement);
Game.inventory.create("Bronze Knife", true, true);
Game.inventory.create("Ramen Noodles", false, true);
Game.inventory.create("Boots w/da Fur", true, true);
Demo: http://codepen.io/tarasyuk/pen/yyJGJK
Game is a function, and you're defining a variable named Game.
Try to rename var Game = new Game(...); to var game = new Game(...);
Use new when creating an inventory. Use dot notation to access inventory's methods, as they are properties of the inventory object.
// Relevant changes shown:
function Game(body, mainElement, inventoryItems, statusElement) {
this.inventory = new Inventory(inventoryItems);
}
Game.inventory.create("Bronze Knife", true, true);
In the future, you may want to try running your code through a linter like JSLint. Just turn off the "messy white space" option or add /*jslint white: true */ to the top of your file, and it should give you useful feedback on how to solve this on your own.
I ran your code through JSLint and the first thing I noticed was "'Inventory' was used before it was defined." So I moved Inventory above Game. I ran JSLint again and it reported "Missing 'new'." Finally, I looked down through the report and found "'create' was used before it was defined.". Those two points of data could have hinted you in the right direction.
Related
I want to loop a function changing the variable each time it runs until all variables are used. Currently, I have this function duplicated 20+ times changing out the "a_week" for each one.
var a_week = "yes";
var b_week = "no";
var c_week = "yes";
function onload() {
if a_week = "yes" {
document.getElementById("dot").classList.add('open');
}
else if a_week = "no" {
document.getElementById("dot").classList.add('closed');
}
}
I would make an array of your weeks, make your onload function take an argument and then loop through them.
const weeks = [true, false, false, true];
function onload(week) {
if(week) {
document.getElementById("dot").classList.add('open');
} else {
document.getElementById("dot").classList.add('closed');
}
}
weeks.forEach(onload);
You can look at the docs for forEach at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach.
For each distinct week, you may not be intending to change the same HTML element each time. The above code would just keep adding classes to the same #dot element. If you intended to target multiple elements, maybe save an array of elements or their selectors. Or combine that with the data in an object like my old answer has. You didn't share your HTML structure so I'm not sure what the best way to structure the DOM manipulation is.
Also onload is not a great name for a function since it may be assumed to be connected to the browser's onload event.
Answer for old question:
Seems like you should make whatever sa_g_week represents an object and then loop through an array of them (or make an map/object out of them if they need to be referenced by key). I'm not sure what your context is but I'm going to make up some field names and assume you're working with locations.
const locations = [
{
isOpen247: true,
isPermanentlyClosed: false,
openTime: new Date(),
closeTime: new Date(),
},
{
isOpen247: true,
isPermanentlyClosed: true,
openTime: new Date(),
closeTime: new Date(),
},
];
You could then loop through the array and do what you need to:
locations.forEach(location => {
if(location.isOpen247) {
// do stuff
} else {
// do other stuff
}
});
Coming from a low level C background, I'm having difficulty understanding this prototype, function constructor, and "classical classing" constructs.
For the purpose of learning, I've tried to design a menu system.
'menuItem' should have a 'name' property, and a 'remove' function.
'food' should be based on menuItem, and should have no custom properties or functions for the sake of simplicity.
'drink' should be based on menuItem, and and should have no custom properties or functions for the sake of simplicity.
'menu' should contain an array of 'food's, 'drink's and corresponding functions to add new 'food's and 'drink's.
The result should be usable like so:
var testmenu = new menu();
testmenu.addfood("burger");
testmenu.addfood("chips");
testmenu.adddrink("fanta");
testmenu.adddrink("coke");
alert(JSON.stringify(testmenu));
testmenu.foods[0].remove();
alert(JSON.stringify(testmenu));
This is what I came up with:
function menu() {
var that = this;
this.foods = new Array();
this.drinks = new Array();
this.addfood = function(name) {
that.foods[that.foods.length] = new food(name);
// this seems silly, is there a way of getting the index in the array without giving it an index property?
that.foods[that.foods.length - 1].index = that.foods.length - 1;
// can't store the menu
//that.foods[that.foods.length - 1].menu = that;
return that.foods.length - 1;
}
this.adddrink = function(name) {
that.drinks[that.drinks.length] = new drink(name);
// same problem as with food
that.drinks[that.drinks.length - 1].index = that.drinks.length - 1;
//that.drinks[that.drinks.length - 1].menu = that;
return that.drinks.length - 1;
}
}
var menuItem = {
name: "New menuItem",
remove: function() {
alert("Remove: " + this.name + " at index " + this.index);
// No way of telling what menu the menuItem is in, I have to assume testmenu
testmenu[this.menuItemType].splice(this.index, 1);
//this.menu[this.menuItemType].splice(this.index, 1);
}
};
function food(name) {
if(name) this.name = name;
this.menuItemType = "foods";
}
food.prototype = menuItem;
function drink(name) {
if(name) this.name = name;
this.menuItemType = "drinks";
}
drink.prototype = menuItem;
var testmenu = new menu();
testmenu.addfood("burger");
testmenu.addfood("chips");
testmenu.adddrink("fanta");
testmenu.adddrink("coke");
alert(JSON.stringify(testmenu));
testmenu.foods[0].remove();
alert(JSON.stringify(testmenu));
There are two problems I am having:
there is no way for the remove function to know which menu to remove the menuItem from.
there is no way to get the index of an array item, you have to store it as a property.
Your prototypes and "classes" look quite fine.
there is no way for the remove function to know which menu to remove the menuItem from.
Sure, how would you know? You might want to pass it as a parameter. However, the more OOP way would be to put the remove method on the menu class (the collection, on which also the add methods are defined) and to pass the item as an argument, instead of having it on the menuitem.
// can't store the menu
//that.foods[that.foods.length - 1].menu = that;
What stops you? Sure, JSON.stringify throws an error if you pass in an object with cyclic references. You might want to use a debugger, or at least check the error console. Or try to do console.log(testmenu) instead of the alert, so that you don't need to serialize it but can dynamically inspect it.
there is no way to get the index of an array item, you have to store it as a property.
Well, you could search for it using the indexOf array method if you don't want to store the index. It would become inaccurate anyway as soon as you remove other items.
I created this Object with 3 properties:
Node = {
name : "",
isOkay : true,
rotation : 0.0
};
How would i go creating an array of these objects, in size of 100.
So later i could do something like this:
nodeList[74].name = "Peter";
nodeList[74].isOkay = false;
nodeList[74].rotation = 1.3;
or similar...
I'm really new to this, i found couple of topics about this, but it never compiles properly.
I would be really grateful if anyone could show the proper syntax, Thanks!
I would use this way:
var Node = function() {
this.name = "";
this.isOkay = true;
this.rotation = 0.0
}
var nodeList = [];
for (var i = 0; i < 10; i++)
{
nodeList.push(new Node());
}
nodeList[0].name = "test";
So you could create a new object(really new) in order to manage it later. Look here.
EDIT:
What I have done is created an object with a constructor method, you can check it on MDN here.
Creating an object like you have done:
var Node = { /* ... */ }
Is like having one object initiated. To have another, you'll have to write another one and so on. With that contructor you may create any instances you want based on that model.
You might want to do this lazily
Depending on the situation might be helpful to do this lazily
var Node = function(name, isOkay,rotation){
if(!(this instanceof Node)) return new Node(name,isOkay,rotation);
else {
this.name = name;
this.isOkay = isOkay;
this.rotation = rotation;
}
}
var NodeCollective = function(numberOfNodes){
if(!(this instanceof NodeCollective)) return new NodeCollective(numberOfNodes);
else{
var _collective={};
var _defaultName = "", _defaultIsOkay = true, _defaultRotation=0.0;
this.length = numberOfNodes;
this.getNode=function(nodeNumber){
if(!_collective.hasOwnProperty(nodeNumber) && nodeNumber < numberOfNodes){
_collective[nodeNumber]=
Node(_defaultName,_defaultIsOkay,_defaultRotation);
}
//I am just assuming I am not going to get garbage
//you can put in checks to make sure everything is kosher
//if you really want to
return _collective[nodeNumber];
};
}
}
but it also depends on what you are trying to do... if you might not be getting all of the nodes in your program then implementing them in some way that avoids greedily creating them could save you a lot of time if the code is executed often, but if the piece of code isn't executed often this might be over kill.
var nodeList = []; // create empty array
nodeList.push(Node); // add the object to the end of the array
nodeList[0].rotation = 1.3; // set rotation property of the object
console.log(nodeList[0]); // prints the object to console
I picked up this book a while ago to help understand how to apply my knowledge of design patterns in Java to web developement. However, I've come across an odd discrepancy in the introduction.
The authors state that the following code defines a class that lets the user create animation objects:
//Anim class
var Anim = function(){ /*code here*/ };
Anim.prototype.start = function(){ /*start code here*/ };
Anim.prototype.stop = function() { /*stop code here */};
//create a new Anim object and call the start method
var newAnim = new Anim();
newAnim.start();
I tried something similar with my app.
//Nucleus class and addLink function
var Nucleus = function(){
this.location=null;
this.links = [];
}
//revamp object and add to link array
Nucleus.prototype.addLink = function(marker){ }
The above class was instanciated as a global variable via
var curSpot = new Nucleus();
However, Firebug threw an error at page load stating that Nucleus is not a constructor, and Javascript button handling functionality was disabled. The problem was solved by changing the Nucleus definition to
function Nucleus(){ /*instance members here*/ }
and now the OO functionality works. Why does the latter example work, but the book's example throws an error?
At the request of Ryan Lynch, more code posted. This is the only code where 1curStop is used. As its a global variable,
//global variables
var curStop = new Nucleus();
function showMarkers(){
//unreleated code here
var tourList = [];
//handles a double click event, adds current marker to list and creates one
//if not null. Otherwise, create a new Nucleus object and add current location
(function(marker){
google.maps.event.addListener(marker, 'dblclick', function(){
if (curStop != null){
tourList.push(curStop);
curStop = null;
} else {
curStop = new Nucleus();
curStop.addLocation(marker);
}
}); //end listener
})(marker);
}
function postTour(){
//need CurStop to be a global variable, since only new double-click events add the
//object to the tourList array. This makes sure that all objects are saved on
//button click
tourList.push(curStop);
}
On the upside I'm kinda bright, on the downside I'm wracked with ADD. If I have a simple example, that fits with what I already understand, I get it. I hope someone here can help me get it.
I've got a page that, on an interval, polls a server, processes the data, stores it in an object, and displays it in a div. It is using global variables, and outputing to a div defined in my html. I have to get it into an object so I can create multiple instances, pointed at different servers, and managing their data seperately.
My code is basically structured like this...
HTML...
<div id="server_output" class="data_div"></div>
JavaScript...
// globals
var server_url = "http://some.net/address?client=Some+Client";
var data = new Object();
var since_record_id;
var interval_id;
// window onload
window.onload(){
getRecent();
interval_id = setInterval(function(){
pollForNew();
}, 300000);
}
function getRecent(){
var url = server_url + '&recent=20';
// do stuff that relies on globals
// and literal reference to "server_output" div.
}
function pollForNew(){
var url = server_url + '&since_record_id=' + since_record_id;
// again dealing with globals and "server_output".
}
How would I go about formatting that into an object with the globals defined as attributes, and member functions(?) Preferably one that builds its own output div on creation, and returns a reference to it. So I could do something like...
dataOne = new MyDataDiv('http://address/?client');
dataOne.style.left = "30px";
dataTwo = new MyDataDiv('http://different/?client');
dataTwo.style.left = "500px";
My code is actually much more convoluted than this, but I think if I could understand this, I could apply it to what I've already got. If there is anything I've asked for that just isn't possible please tell me. I intend to figure this out, and will. Just typing out the question has helped my ADD addled mind get a better handle on what I'm actually trying to do.
As always... Any help is help.
Thanks
Skip
UPDATE:
I've already got this...
$("body").prepend("<div>text</div>");
this.test = document.body.firstChild;
this.test.style.backgroundColor = "blue";
That's a div created in code, and a reference that can be returned. Stick it in a function, it works.
UPDATE AGAIN:
I've got draggable popups created and manipulated as objects with one prototype function. Here's the fiddle. That's my first fiddle! The popups are key to my project, and from what I've learned the data functionality will come easy.
This is pretty close:
// globals
var pairs = {
{ div : 'div1', url : 'http://some.net/address?client=Some+Client' } ,
{ div : 'div2', url : 'http://some.net/otheraddress?client=Some+Client' } ,
};
var since_record_id; //?? not sure what this is
var intervals = [];
// window onload
window.onload(){ // I don't think this is gonna work
for(var i; i<pairs.length; i++) {
getRecent(pairs[i]);
intervals.push(setInterval(function(){
pollForNew(map[i]);
}, 300000));
}
}
function getRecent(map){
var url = map.url + '&recent=20';
// do stuff here to retrieve the resource
var content = loadResoucrce(url); // must define this
var elt = document.getElementById(map.div);
elt.innerHTML = content;
}
function pollForNew(map){
var url = map.url + '&since_record_id=' + since_record_id;
var content = loadResoucrce(url); // returns an html fragment
var elt = document.getElementById(map.div);
elt.innerHTML = content;
}
and the html obviously needs two divs:
<div id='div1' class='data_div'></div>
<div id='div2' class='data_div'></div>
Your 'window.onload` - I don't think that's gonna work, but maybe you have it set up correctly and didn't want to bother putting in all the code.
About my suggested code - it defines an array in the global scope, an array of objects. Each object is a map, a dictionary if you like. These are the params for each div. It supplies the div id, and the url stub. If you have other params that vary according to div, put them in the map.
Then, call getRecent() once for each map object. Inside the function you can unwrap the map object and get at its parameters.
You also want to set up that interval within the loop, using the same parameterization. I myself would prefer to use setTimeout(), but that's just me.
You need to supply the loadResource() function that accepts a URL (string) and returns the HTML available at that URL.
This solves the problem of modularity, but it is not "an object" or class-based approach to the problem. I'm not sure why you'd want one with such a simple task. Here's a crack an an object that does what you want:
(function() {
var getRecent = function(url, div){
url = url + '&recent=20';
// do stuff here to retrieve the resource
var content = loadResoucrce(url); // must define this
var elt = document.getElementById(div);
elt.innerHTML = content;
}
var pollForNew = function(url, div){
url = url + '&since_record_id=' + since_record_id;
var content = loadResoucrce(url); // returns an html fragment
var elt = document.getElementById(div);
elt.innerHTML = content;
}
UpdatingDataDiv = function(map) {
if (! (this instanceof arguments.callee) ) {
var error = new Error("you must use new to instantiate this class");
error.source = "UpdatingDataDiv";
throw error;
}
this.url = map.url;
this.div = map.div;
this.interval = map.interval || 30000; // default 30s
var self = this;
getRecent(this.url, this.div);
this.intervalId = setInterval(function(){
pollForNew(self.url, self.div);
}, this.interval);
};
UpdatingDataDiv.prototype.cancel = function() {
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})();
var d1= new UpdatingDataDiv('div1','http://some.net/address?client=Some+Client');
var d2= new UpdatingDataDiv('div2','http://some.net/otheraddress?client=Some+Client');
...
d1.cancel();
But there's not a lot you can do with d1 and d2. You can invoke cancel() to stop the updating. I guess you could add more functions to extend its capability.
OK, figured out what I needed. It's pretty straight forward.
First off disregard window.onload, the object is defined as a function and when you instantiate a new object it runs the function. Do your setup in the function.
Second, for global variables that you wish to make local to your object, simply define them as this.variable_name; within the object. Those variables are visible throughout the object, and its member functions.
Third, define your member functions as object.prototype.function = function(){};
Fourth, for my case, the object function should return this; This allows regular program flow to examine the variables of the object using dot notation.
This is the answer I was looking for. It takes my non-functional example code, and repackages it as an object...
function ServerObject(url){
// global to the object
this.server_url = url;
this.data = new Object();
this.since_record_id;
this.interval_id;
// do the onload functions
this.getRecent();
this.interval_id = setInterval(function(){
this.pollForNew();
}, 300000);
// do other stuff to setup the object
return this;
}
// define the getRecent function
ServerObject.prototype.getRecent = function(){
// do getRecent(); stuff
// reference object variables as this.variable;
}
// same for pollForNew();
ServerObject.prototype.pollForNew = function(){
// do pollForNew(); stuff here.
// reference object variables as this.variable;
}
Then in your program flow you do something like...
var server = new ServerObject("http://some.net/address");
server.variable = newValue; // access object variables
I mentioned the ADD in the first post. I'm smart enough to know how complex objects can be, and when I look for examples and explanations they expose certain layers of those complexities that cause my mind to just swim. It is difficult to drill down to the simple rules that get you started on the ground floor. What's the scope of 'this'? Sure I'll figure that out someday, but the simple truth is, you gotta reference 'this'.
Thanks
I wish I had more to offer.
Skip