Develop Reference

Trying to get some buttons do the same thing

I am using Animate to create an animation. I am on the process of getting all the buttons to do what they are supposed to. Right now, I am stuck with the following. I would like to assign multiple buttons the same action, this is because the buttons appear on many different frames, so this is what I have got but I am getting an error.
var btns = ["btncasco","btncasco1","btncasco2"];
btns.forEach( btnsIteratee.bind(this));
function btnsIteratee(item){
this[item].addEventListener("click", function(event){
this.gotoAndStop(0);
});
}
I want to be able to click on any of the referenced button names and make them go to frame 0. Any idea about of what is wrong?
This is the error I get:
"Uncaught TypeError: Cannot read property 'addEventListener' of undefined"

It's a little hard to tell from the small amount of code you have provided what else is going on that could cause unexpected behaviour of this. However. The following:
btns.forEach( btnsIteratee.bind(this));
Could benefit from being bound once, as the reference to this won't change for each instance of the forEach loop. Then having the array item passed in. Something like:
var btns = ["btncasco", "btncasco1", "btncasco2"];
function btnsIteratee(item) {
item.addEventListener("click", function(event) {
this.gotoAndStop(0);
});
}
btnsIteratee = btnsIteratee.bind(this);
btns.forEach(btnsIteratee);
The above is pseudo code as there isn't much provided by your example

thanks for the posts. I finally sorted this out using this chunk of code for each series of buttons.
var btntres = ['btnlumbrera2' , 'btnlumbrera3' ,'btnlumbrera4' ,'btnlumbrera5' ,'btnlumbrera6' ,'btnlumbrera7', 'btnlumbrera8', 'btnlumbrera9', 'btnlumbrera10', 'btnlumbrera11', 'btnlumbrera12', 'btnlumbrera13', 'btnlumbrera14', 'btnlumbrera15', 'btnlumbrera16', 'btnlumbrera17', 'btnlumbrera18'];
btntres.forEach( btnsIteratee3.bind(this) );
function btnsIteratee3(item){
if (this[item] && !this[item].hasEventListener('click')) {
this[item].addEventListener("click", hyandler.bind(this));
} else {
console.log('item no existe', item);
}
function hyandler(event){
this.gotoAndStop(4);
}
}

JS Script Returning Undefined Instead of Expected String

I basically have been making a program that will go through a website and grab certain images. This is not too hard, just a little complex. I was running the JS code below to click onto the correct page, check for the gallery element to load every 100ms, then finally log the entire object as a string. Most works, but when getting the console.log(...); I get undefined as the main return, and I get the string afterwards as a secondary. This will not due because my program can only intercept the main logged value, not any secondaries. Below is my code and an example output. Thank you!
Code:
document.getElementById('tlcItem_47871').click();
var checkExist = setInterval(function() {
if ($('.pgFooterThumblist').length) {
clearInterval(checkExist);
var ele = document.getElementsByClassName('pgFooterThumb');
console.log(JSON.stringify(ele));
}
}, 100);
Ex Output:
/*Primary Output(First)*/<- undefined
/*Secondary Output(Second)*/<- {"0":{},"1":{},"2":{},"3":{},"4":{},"5":{},"6":{},"7":{},"8":{},"9":{},"10":{},"11":{},"12":{},"13":{},"14":{},"15":{},"16":{},"17":{},"18":{},"19":{},"20":{},"21":{},"22":{},"23":{},"24":{},"25":{},"26":{},"27":{},"28":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"39":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{},"87":{},"88":{},"89":{},"90":{},"91":{},"92":{},"93":{},"94":{},"95":{},"96":{},"97":{},"98":{},"99":{},"100":{},"101":{},"102":{},"103":{},"104":{},"105":{},"106":{},"107":{},"108":{},"109":{},"110":{},"111":{},"112":{},"113":{},"114":{},"115":{},"116":{},"117":{},"118":{},"119":{},"120":{},"121":{},"122":{},"123":{},"124":{},"125":{},"126":{},"127":{},"128":{},"129":{},"130":{},"131":{},"132":{},"133":{},"134":{},"135":{},"136":{},"137":{},"138":{},"139":{},"140":{},"141":{},"142":{},"143":{},"144":{},"145":{},"146":{},"147":{},"148":{},"149":{},"150":{},"151":{},"152":{},"153":{},"154":{},"155":{},"156":{},"157":{},"158":{},"159":{},"160":{},"161":{},"162":{},"163":{},"164":{},"165":{},"166":{},"167":{},"168":{},"169":{},"170":{},"171":{},"172":{},"173":{},"174":{},"175":{},"176":{},"177":{},"178":{},"179":{},"180":{},"181":{},"182":{},"183":{},"184":{},"185":{},"186":{},"187":{},"188":{},"189":{},"190":{},"191":{},"192":{},"193":{},"194":{},"195":{},"196":{},"197":{},"198":{},"199":{},"200":{},"201":{},"202":{},"203":{},"204":{},"205":{},"206":{},"207":{},"208":{},"209":{},"210":{},"211":{},"212":{},"213":{},"214":{},"215":{},"216":{},"217":{},"218":{},"219":{}}
EDIT: In the workflow that I have I am able to set my JS script in my c++, and then I can run javascript into a loaded webpage. The only issue is that the runJavascript() function will take the first value outputted and use that. No way around it so I need the string to be outputted ASAP.

THIS IS NOT A CORRECT ANSWER. I AM LEAVING IT FOR CONTEXT ONLY.
Assuming that all that is need is to avoid console logging an undefined value, this would suffice:
document.getElementById('tlcItem_47871').click();
var checkExist = setInterval(function() {
if ($('.pgFooterThumblist').length) {
clearInterval(checkExist);
var ele = document.getElementsByClassName('pgFooterThumb');
var loggedOutput = JSON.stringify(ele);
if (loggedOutput) {
console.log(loggedOutput);
}
}
}, 100);
This is assuming that somehow your C code intercepts this console log. Generally in JavaScript if you need a value from a function you need to pass it back to the caller using a return statement, but it seems that perhaps you have a unique case in which this is not required.

jQuery .map won't work properly sometimes

I built some Chrome extension that uses $(".class").map(..) function, but for some reason sometimes it won't find the element I am looking for..
This is my code:
var videocontent = $(".content").map(function () { if (this.innerHTML.indexOf("id=\"player_wrapper\"") > -1) { return this; } });
if(videocontent.length)
{
// Success
}
else
alert("ERROR");
There are multiple elements with class .content so I use .map to find the correct one.
Once every 10 times it attempts, it will alert an error because it didn't find it for some reason. I was trying multiple things but couldn't find a solution.

$(...).map() isn't designed for searching for element, it is for applying a function to each element of an array to transform it somehow. You want to use $(...).find() instead:
var videocontent = $(".content").find('#player_wrapper');
https://api.jquery.com/find/
And it looks like you are then going up the tree to find it's parent, so:
var videocontent = $(".content").find('#player_wrapper').parent();

Clicking objects on the evaluated page using CasperJS

I'm trying to click x number of objects on the evaluated page but it's failing after all day sunday attempts.. I have the following code, you can see I build up a list of objects in my variable (called itemsToAdd) and then I need that to be passed onto the evaluated page and then those objects to be clicked.
I know you can't pass complex objects to the evaluated page but every attempt I've tried has failed.. I've tried everything, please help. I've also tried custom js files although I couldn't get that working either.
$(function(ns) {
ns.myMethod = function(itemArray) {
var items = itemArray.items;
for (i = 0; i < items.length; i++) {
casper.thenEvaluate(function() {
casper.click(items[i].buttonId);
casper.waitUntilVisible(items[i].basketId, function() {
casper.echo(items[i].successMessage);
});
});
}
return this;
};
})(namespace('test'));
This is my variable, the buttonId is the DOM id for the button on the evaluated page. The basketId is another section on the evaluated page that gets updated to represent the button clicking has worked.
Complex variable
var itemsToAdd = {
'items': [
{
buttonId: '#button1',
basketId: '#nowInBasket1',
successMessage: 'It worked'
},
{
buttonId: '#button2',
basketId: '#nowInBasket2',
successMessage: 'this worked aswell'
}
]
};
Calling the code
test.myMethod(itemsToAdd);

There are multiple problems with your code.
evaluate is the sandboxed page context. There are no CasperJS or PhantomJS functions accessible inside of it. But it doesn't look like you are using the page context, so you should change thenEvaluate to then. I have written post here which shows for which things you can use the evaluate function/page context.
JavaScript has function scope. Read this question to learn more. This means that after the loop has executed all is point to the last i. You need a closure to fix this (here I use an IIFE, but you can also change the loop to itemArray.items.forEach(...).
var items = itemArray.items;
for (i = 0; i < items.length; i++) {
(function(i){
casper.then(function() {
casper.click(items[i].buttonId);
casper.waitUntilVisible(items[i].basketId, function() {
casper.echo(items[i].successMessage);
});
});
})(i);
}
If this doesn't solve your problem then this is probably a problem with your $ framework, whatever that is.

JavaScript callback function with relative variables

I am not entirely sure how to phrase this question, but basically, I have a class, button that on its click should call the function passed to it.
button = function(...,callBack) {
//...
this._cb = callBack;
}
button.prototype.callBack = function(e) {
//...
this._cb();
}
and then somewhere else
//on canvas click
e.target.callBack(e);
(I hope this is about the right amount of background, I can give more if needed)
So the issue I am running into is when I dynamically instantiate the buttons such that their callbacks use data from an array. i.e.
for (var i = 0; i < levels.length; i++) {
buttons[buttons.length] = new button(..., function() {drawLevel(levels[i])});
}
Then when they are clicked, they run that callback code and try to find some random value for i (probably a for-loop that didn't use var) and runs that level.
My question is, how can I (without using eval) circumvent this problem.
Thanks!

I'm not 100% clear on what you're asking, but it looks like you're going to be getting the wrong value for i in the anonymous function you're creating in the loop (it will always be levels.length)
Way around this is to have a different scope for every function created, with the i in each scope being a copy of the i in the loop
buttons[buttons.length] = new button(..., (function(i){
return function() {drawLevel(levels[i])};
})(i));