We Keep Coding

Javascript object function call wont work

I'm working on a HTML5 soundboard, but i've hit a bit of a snag...
I'm trying to get a stop function to work on all of the sounds at once that are played. Unfortunatly when i call this function from a buttonpress, the object doesn't appear to have a stop function. The code for the actual sound element is the following:
// Container to keep all sounds in one place. This is a Dictionary within a dictionary to be able to search by catagory.
var sounds = {};
// Counter to keep track of unique ID's
var lastID = 0;
// Base class for initializing Any class
var Base = function(methods){
var base = function() {
this.initialize.apply(this, arguments);
};
for (var property in methods) {
base.prototype[property] = methods[property];
}
if (!base.prototype.initialize) base.prototype.initialize = function(){};
return base;
};
//Complete class for the Sound object. Generates its own DIV's and HTML5 tags to play stuff.
var Sound = Base({
// Init all the variables.
initialize: function(name, file, target='Sounds') {
this.name = name;
this.file = file
this.button = null;
this.audioelement;
this.id = lastID + 1;
this.target = target;
lastID ++;
// Check if the catagory is there, if not: create it with a placeholder object
var catagory = sounds[this.target];
if(catagory == null){
sounds[this.target] = {99:null};
}
sounds[this.target][this.id] = this;
// Call init function
this.init();
},
play : function() {
obj = this
if(obj.audioelement.paused == true){
obj.audioelement.play();
}else{
obj.audioelement.pause();
obj.audioelement.fastSeek(0);
}
},
stop : function(){
obj = this;
obj.audioelement.pause();
},
init : function(){
// Statement for JS class based shenanigans.
obj = this
// Create a button and add some text to it
obj.button = document.createElement("BUTTON");
obj.button.appendChild(document.createTextNode(obj.name));
// Set ID's and names to keep track of this button
obj.button.id = obj.id;
obj.button.name = obj.target;
// Get or create parent element. Used for catagory based display
var el = getOrCreateElement(obj.target)
el.appendChild(obj.button);
// Create audio element and set appropriate settings
obj.audioelement = document.createElement("AUDIO");
obj.audioelement.src = obj.file;
obj.audioelement.name
obj.button.appendChild(obj.audioelement);
// Add function to play/pause to button
obj.button.onclick = buttonClicked;
});
function buttonClicked(){
// Fetch sound from dicionary container using the name and id from the button [SET AT SOUND.INIT()]
var sound = sounds[this.name][this.id];
// Call the play function in [SOUND]
sound.play();
}
And for the stopall function:
function stopAll(){
// Scroll through the entire dictionary
for ( var key in sounds){
for ( var id in sounds[key]){
// Check if the sound is not a placeholder
if(id == 99){
continue;
}
// Call stop function with fetched object.
var sound = sounds[key][id];
sound.stop();
}
}
}
The weird thing is is that the play function does seem to work, but not the stop function. It says that the object doesn't have that specific function...
Any ideas would be appriciated!
WM

for ( var x in object) loops over a few more properties than just methods, including ones on the base object's prototype.
If you console.log(id); within that inner loop you will see the extra ones.
Try adding this inside your inner for loop:
if (typeof id !== 'function') {
continue;
}
Edit: this isn't quite correct but I'm not in a position to see what it should be right now. It's almost there, from memory! Keep playing with it.

Passing object variable to onchange event JS

I've been browsing around for an answer to this question for a little while now, but haven't found a solution. I need to pass an object to a function which is being fired "onChange" when a select option is chosen by a user. The current code is:
selecter.onchange = function(){
var runScript = $("#actionSel option:selected").attr('script');
console.log(runScript);
eval("("+runScript+")();");
}
The intention here is to store a function within the "script" attr of the options, which will then be run when that option is selected. However, for one of my functions I need to pass a variable from the parent scope on in order to interact with the server via websockets.
The function stored in the "Script" attribute is :
function(){ popConfirm("Restore User","Do you really want to restore the selected users? This will un-delete the selected deleted users.",function(r){ if(r)restoreUser(r,io); });
Essentially this verifies with the user that they want to do what they've selected, then passes the result to my restore user function. It also needs to pass the "io" object on. However, I'm getting an error which states that io is undefined.
Any ideas would be extremely helpful. Thanks!
As requested, here are some additional relative pieces of code showing where IO is introduced.
AdminIO = new io(servPath);
AdminIO.on('send_users',function(rows){
toggleLoad();
appendUsers(rows,AdminIO);
});
Within appendUsers there's another function which compiles the select list and its options, dropActions(), wherein the selector.onchange and other piece I posted before are introduced. The selector.onchange is part of the function that creates the dropdown list. The function(){ popConfirm() } is added as the function to run on selection of that item. The function to build the list is :
dropActions = function(bActions, lActions, options){
// bActions = {id: myID, text: "this is my action", elem: document.getElementById('getDiv'), action: function(){ /*mycode here */}}
// lActions = {text: "select me to run an action", action: function(){ /*mycode here */}}
bActions = bActions || null;
lActions = lActions || null;
options = options || {elem: document.body, id: null};
if(!bActions && !lActions){ console.error("No actions added or available."); return; }
var
selID = options.id,
starter = (selID) ? document.getElementById(selID) : options.elem,
optsBar = document.createElement("header"),
selecter = document.createElement("select");
starterSel = document.createElement("option");
optsBar.id = "actionSelH";
starterSel.innerText = "More Actions";
starterSel.setAttribute('script','javascript:void(0)');
selecter.id = "actionSel";
selecter.appendChild(starterSel);
for(var i= 0; bActions.length > i; i++){
var
buttonText = bActions[i].text,
buttonID = bActions[i].id || 'ACT'+i,
buttonAction = bActions[i].action,
button = document.createElement('div');
button.id = buttonID;
button.classList.add("actionButton");
button.innerText = buttonText;
button.onclick = buttonAction;
optsBar.appendChild(button);
}
for(var i= 0; lActions.length > i; i++){
var selText = lActions[i].text,
selScript = lActions[i].action,
option = document.createElement('option');
option.innerText = selText;
option.setAttribute('script',selScript);
selecter.appendChild(option);
}
selecter.onchange = function(){
var runScript = $("#actionSel option:selected").attr('script');
console.log(runScript);
eval("("+runScript+")();");
}
optsBar.appendChild(selecter);
$(optsBar).insertBefore('#user_list_table');
//$('#user_list_table').after(optsBar);
//$(starter).prepend(optsBar);
},
Hopefully more context helps!

Instead of using eval, you could use the function constructor and pass your parameters directly to that function:
var scriptFunction = new Function(r, io, runScript);
scriptFunction(r, io);
Of course, this code assume that r and io will always be the variable you are looking for. If this ain't the case, you'll have to write your own logic to take the variable from the parent scope and then pass them to the scriptFunction.
Update
If you are able ton change the provided script, you could also try to implicitly declare the variables r and io:
function(r, io){ popConfirm("Restore User","Do you really want to restore the selected users? This will un-delete the selected deleted users.",function(r, io){ if(r)restoreUser(r,io); });

Iterate over an HTMLcollection to dynamically define values in a constructor function?

i'll get right to the description and example code as i bet many of you are as confused about the title as i am (tried my best).
Situation: I have a form that submits input data to a new instance of an object, using a constructor function.
CURRENT CODE:
// Selectors
var submit = document.getElementById('submit-btn');
var formValues = document.getElementsByClassName('input');
// ** Task Object
function Task(arrayOfValues) {
this.title = arrayOfValues[0].value;
this.deadline = arrayOfValues[1].value;
this.status = arrayOfValues[2].value;
}
submit.addEventListener('click', function(e) {
e.preventDefault();
var newTask = new Task(formValues);
}, false);
Problem: Passing the array as an argument and assigning each index manually feels incredibly brittle to me. If i were to extend the data collection of the form i would have to manually assign each new value as a separate variable. What is the syntax or pattern if you will for iterating over an array and dynamically assigning values to variables in a constructor function ? Thank you in advance. Any and all help is much appreciated.
EXAMPLE of desired CODE
var formValues = document.getElementsByClassName('input');
// ** Task Object
function Task(arrayOfValues) {
this.values = arrayOfValues;
for (var i=0;i<this.values.length;i++) {
var key = this.values[i].getAttribute('name');
// This should be used with "this" to reference key ie. "this.title, this.deadline, this.status ect...
var value = this.values[i].value;
// This will be the value associated with each key reference ie. "this"
return this[key] = value;
// is this even possible ?
}
}
submit.addEventListener('click', function(e) {
e.preventDefault();
var newTask = new Task(formValues);
}, false);

Just use the names of the form elements as the property names in the object.
function Task(arrayOfValues) {
for (var i=0;i<arrayOfValues.length;i++) {
var key = arrayOfValues[i].name;
var value = arrayOfValues[i].value;
this[key] = value;
}
}
Don't use return inside the loop, that will end the constructor after processing the first element in the array, and ignore the rest.

I would just take the three parameters separately, let the caller figure out which one is the title, deadline or status
function Task(title, deadline, status) {
this.title = title;
this.deadline = deadline;
this.status = status;
}
Now your callers can figure out which one is which by using IDs, data-attributes, or anything they want.
<input id="title-x"> <input id="deadline"> <input id="status">
submit.addEventListener('click', function(e) {
e.preventDefault();
var getVal = function(id) { return document.getElementById(id).value; }
var newTask = new Task(getVal('title-x'), getVal('deadline'), getVal('status'));
}, false);
Now your constructor doesn't rely on the order within the array, or even that they are DOM elements.
You could always have a contract where a specific input maps to a task field through data-attributes
<input data-task-field="title">
<input data-task-field="deadline">
<input data-task-field="status">
<input data-task-field="newField">
/**
* #param {object} taskDescription
* #param {string} taskDescription.title
* #param {string} taskDescription.deadline
* #param {string} taskDescription.status
* #param {string} taskDescription.newField
*/
function Task(taskDescription) {
this.task = taskDescription;
}
submit.addEventListener('click', function(e) {
e.preventDefault();
var tasks = document.querySelectorAll('input[data-task-field]');
var taskSpec = {};
for (var i=0; i < tasks.length; i++) {
taskSpec[tasks.getAttribute('data-task-field')] = tasks.value;
}
var newTask = new Task(taskSpec);
}, false);

I would use an associative array -
http://www.w3schools.com/js/js_arrays.asp
var assArray = [];
assArray["title"] = document.getElementbyID(......)
That makes your array semantically meaningful and less brittle. It doesn't matter if you expand the form, so long as you don't change the names it will continue to work.
It also means you don't have to change the call signature of your constructor each time you expand the form, you only have to alter the body to deal with the new elements in the array (or not, as you so choose).

Plain OOP Javascript: Treating localStorage as an Array doesn't work?

I am trying to implement localStorage with my simple OOP todo list.
The fiddle is here: https://jsfiddle.net/b81t2789/
I thought I could just treat the local storage like an array and copy the logic I used with my actual array but that doesn't work.
Here, right after pushing the task into the array, I added a line that stores the task in the local storage and stringifies it:
// function that adds new task to the array
function pushArray(){
var newtask = new Task(toDo.value, "No note yet");
taskItems.push(newtask);
var storedTask = localStorage.setItem(newtask, JSON.stringify(newtask));
displayStorage(result2, storedTask);
displayArray(result, newtask.Name);
appendNote(result, newtask);
}
Then right below the function that displays the new array element I added one that retrieves the item from local storage, parses it, then creates a DOM element with the new task and appends it to another container.
//function that displays array elements
function displayArray(parent,obj){
var task = make("div","class","taskitem",obj);
parent.appendChild(task);
fadeIn(task);
}
//function that displays storage elements
function displayStorage(parent,obj){
var retrieveObject = localStorage.getItem(obj);
var parseTask = JSON.parse(retrieveObject);
var newDiv = make("div", "class", "newdiv", parseTask);
parent.appendChild(newDiv);
fadeIn(newDiv);
}
This doesn't work at all, not sure why, and then if I were to be able to get this to work how would I continue to go about storing and updating notes like I did in the array with local Storage? I thought this would be easy as I figured out how to make a todo with objects and arrays pretty quickly (when I thought it would be super difficult, but it's been a week now and I've made no progress!)
I guess these are the pitfalls of learning to code by yourself, any help would be much appreciated thank you!
Here is the full javascript code:
//getElementById shortcut
function grab(id) {
return document.getElementById(id);
}
// add eventlistener shortcut
var when = function() {
return function(obj, event, func) {
obj.addEventListener(event, func, false);
};
}();
//Custom function to create DOM elements and set their contents
function make(el,type,name,content){
var theElement = document.createElement(el);
theElement.setAttribute(type, name);
theElement.innerHTML = content;
return theElement;
}
//compute style shortcut
function setStyle(theElement){
return window.getComputedStyle(theElement);
}
//fade in shortcut.
function fadeIn(theElement){
var compute = setStyle(theElement).opacity;
theElement.style.opacity = 1;
}
/*****************************************************/
var toDo = grab("todo");
var result = grab("demo");
var demolist = grab("demolist");
var button = grab("btn");
// submit input on enter which fires function that pushes task into the array.
when(toDo, "keypress", function(event){
if (event.key == "Enter" || event.keyCode == 13) {
pushArray();
toDo.value = "";
}
});
// "SHOW ARRAY" FUNCTION to verify that the array is being updated (I like this better than using the console);
when(button, "click", function(event){
demolist.innerHTML = "";
for(i=0; i< taskItems.length; i++){
demolist.innerHTML += taskItems[i].Name + " " + taskItems[i].Note + "<br>";
}
});
function showNotes(theNote){
var defaultNote = "No note yet";
if(theNote){
}
}
var taskItems = [];
/*********************************************************/
//create Task object
function Task(name, note){
this.Name = name;
this.Note = note;
this.completed = false;
}
// function that adds new task to the array
function pushArray(){
var newtask = new Task(toDo.value, "No note yet");
taskItems.push(newtask);
displayArray(result, newtask.Name);
appendNote(result, newtask);
}
//function that displays array elements
function displayArray(parent,obj){
var task = make("div","class","taskitem",obj);
parent.appendChild(task);
fadeIn(task);
}
//function that displays notes
function appendNote(theElement,obj){
var newClassItem = make("input","class","tasknote");
theElement.appendChild(newClassItem);
when(newClassItem, "keypress", submitNote.bind(null, obj, newClassItem));
}
//function for submitting notes
function submitNote(task,noteInput){
if (event.key == "Enter" || event.keyCode == 13) {
task.Note = noteInput.value;
var newNote = make("div", "class", "hasNote", task.Note);
noteInput.parentNode.replaceChild(newNote, noteInput);
fadeIn(newNote);
when(newNote,"dblclick", function(){
newNote.parentNode.replaceChild(noteInput, newNote);
});
}
}

Being localStorage a key-value storage, depending on your needs, you are better off serializing (stringifying, whatever) the array and saving in a single index.
var tasks = [
'post the question on SO',
'describe it carefully',
'get a nice reply',
'implement the suggested solution'
];
If you really need to split it for performance reasons, you have to index them by a arbitrary index. If you have reordering it gets tricky and you can either reflush the whole set of tasks every time someone adds/edits/deletes/reorder the tasks (memory-efficient, but very CPU intensive) or save the indexes in a different key so you can reconstruct the order later, like:
var tasks = {
'task1': 'implement the suggested solution',
'task2': 'describe it carefully',
'task4': 'get a nice reply',
'task9': 'post the question on SO'
};
var tasksOrder = [9, 2, 4, 1];
The first idea is very simple to implement, but will give you problems with arbitrarily long lists, the second one is much more easy on the CPU but much harder to implement (and uses more memory). It depends on the specifics of your case.

How to connect between prototype chain of objects and HTML representing them?

I have a card game, and cards are represented by Javascript objects that are created as instances of class (card > card-type > card-instance). I did it like this so that the cards can share methods.
Then I construct the HTML, and the cards suppose to be able to do all kinds of stuff, like move or attack for example.
move is defined in Card.prototype.move = function... and attack is UnitCard.prototype.attack
and now I am trying to connect the Card objects to their corresponding HTML elements, so that I will be able to so something like
$('#board').on('click', '.card', function (e) {
this.move(this.location, newLocation);
});
An idea I had is to make all the data and functions of the cards part of the DOM, and insert an object somewhere along the prototype chain of the DOM elements, so that the HTML of that card will have a move function. I know this idea is a bit crazy, but I am trying to avoid constant lookups inside objects (find the clicked card by name in the array of all cards and then if other cards that have influence on the action find them in the dom and then find them in the object etc...)
Any suggestions on how to solve this issue?
UPDATE - Current Code:
var Card = function (type, name, epoch) {
var cardHtml = document.createElement('div');
cardHtml.className += "card";
cardHtml.id = name;
cardHtml.cardType = type;
cardHtml.cardName = name;
cardHtml.cardEpoch = epoch;
this.cardHtml = cardHtml;
}
var Agent = function (cardProps, subtype, description, strike, shield, price) {
//fixed
Card.apply(this, cardProps);
this.subtype = subtype;
this.price = price; //agenda
//changable
this.cardHtml.innerHTML = ss.tmpl['cards-agent'].render({
name: this.name,
});
this.cardHtml.strike = strike;
this.cardHtml.shield = shield;
this.cardHtml.location = []; //board/hand/deck/grveyard
}
Agent.prototype = Object.create(Card.prototype);
Agent.prototype.move = function (currentLocation, newLocarion) {
console.log('move');
}

Store a reference to the instance on the element's data object.
var Card = function (type, name, epoch) {
var cardHtml = document.createElement('div');
cardHtml.className += "card";
cardHtml.id = name;
cardHtml.cardType = type;
cardHtml.cardName = name;
cardHtml.cardEpoch = epoch;
this.cardHtml = cardHtml;
$(cardHtml).data("card",this);
}
Now you can access it within events as needed.
$('#board').on('click', '.card', function (e) {
var card = $(this).data('card');
card.move(card.location, newLocation);
});
This of course assumes you can use jquery, per the jquery you're using in your question.

I can think of two additional options.
You could use bind to create a click handler in which this is actually your object instead of the dom element.
el.onclick = (function(){/* ... */}).bind(yourObj);
In this case, within your function, this would be your object instead of the dom element. As long as your object stores a reference to the dom element itelf, then you're set.
Another option would be to define the click handler within a closure which has a variable containing the object.
function bindHanlder(yourObj, el){
el.onclick = function(){
// "yourObj" can be used here.
};
}

I assume that your board has specific places where your cards can be placed.
You should have a Board object containing an array of Places, something like:
function Card(divId){
this.divId = divId;
//generate Card html elements with jquery
}
function Place(divId){
var currentCard = null;
//attach this javascript object to an html element
this.divId = divId;
//register events of this Place where this Place has this.divId
/*
$(document).on("click", this.divId, function(){
});
*/
this.setCard = function(card){
currentCard = card;
//use jquery to add Card html elements to this Place html element
}
}
function Board(){
var places= new Array();
this.addPlace = function(place){
places.push(place);
}
this.moveCard = function(card, toPlace){
toPlace.setCard(card);
}
}
var card1 = new Card("#divCard1");
var card2 = new Card("#divCard2");
var place1 = new Place("#divPlace1");
var place2 = new Place("#divPlace2");
var board = new Board();
board.addPlace(place1);
board.addPlace(place2);
board.moveCards(card1,place1);
This is really off the top of my head. I don't even know if it runs or not. It's just to give you an idea. Interpret it as pseudo code.
Good luck!