How to detect which Sprite got clicked on - javascript

Im trying to figure out how to know which Sprite got clicked on
var current_dots:Array<Sprite>= [];
for(i in 0...4){
var page = new Sprite();
current_dots.push(page);
page.on('pointerdown', dot_click);
this.addChild(page);
}
function dot_click(){
trace("CLICKED");
}
since each sprite was declared in the for-loop im not sure how to identify which one is getting clicked

I figured a way to do it was like this
function dot_click(e:InteractionEvent){
for( i in 0...current_dots.length){
if(current_dots[i] == e.currentTarget) {
trace("Clicked")
}
}
}
had to pass the interactive parameter

Related

Why is this jquery .each loop stopping my function call in the middle?

This is the entire function I am working on:
function collapse(){
var i = 0;
var currColors = [];
var currTitles = [];
// Get the color and the course id of all the current courses
$('.course').each(function (){
if (rgb2hex($(this).css("background-color")) !== "#f9f9f9") {
currColors.push(rgb2hex($(this).css("background-color")));
currTitles.push($(this).children(".course-id").text());
$(this).children(".course-delete").remove();
$(this).children(".course-id").text("");
$(this).css('background', "#f9f9f9");
}
});
alert("made it");
// Redistribute the classes
// This is where reverse lookup will eventually happen
i = 0;
$('div.course').each(function (){
if (i>=currTitles.length){
return false;
}
$(this).children(".course-id").text(currTitles[i]);
$(this).css('background', currColors[i++]);
$(this).append("<button id='temp' class='course-delete'>X</button>");
});
var i = currColors.length-1;
};
And this is the problematic section
$('.course').each(function (){
if (rgb2hex($(this).css("background-color")) !== "#f9f9f9") {
currColors.push(rgb2hex($(this).css("background-color")));
currTitles.push($(this).children(".course-id").text());
$(this).children(".course-delete").remove();
$(this).children(".course-id").text("");
$(this).css('background', "#f9f9f9");
}
});
I have this function collapse that is supposed to fill in the blank spot in a list of divs that the user has been adding to the screen if they delete one. This function was working fine at one point, but obviously I have screwed it up some how.
There are only and always will be 6 '.course' items because that is the size of the list. When collapse() is called it stops running after n times where n is the number of '.course' elements currently in use. The loop stops there and the whole function stops there. I have tried putting alert() statements everywhere but still no luck. If someone spots what I am missing I would really appreciate it.
I have figured out a work around for now, but I would like to know why my entire function is crashing in the middle.

choose image in array and continue

First time JavaScript coder here.
Trying to solve this so that an image is displayed when the appropriate button for that image is clicked and then the function continues to show the other image in the Array and loops.
For instance if the banner is displaying image 4 and the user clicks on the button for image 2, then the banner should display image 2 and then rotate to show image 3 and continue looping.
Here is the code:
var i = 0;
var baners = new Array();
baners.push('banner1.jpg');
baners.push('banner2.jpg');
baners.push('banner3.jpg');
baners.push('banner4.jpg');
baners.push('banner5.jpg');
function swapImage(){
var img = document.getElementById("banner");
img.src = baners[i];
if (i<(baners.length-1)){i++;
}else{
i=0;
}
setTimeout('swapImage()', 2000);
}
function button1 (){
var img = document.getElementById("banner");
img.src = baners[0]
}
I am unsure if it is possible to make one global function for the 5 buttons.
Thank you!
I am unsure if it is possible to make one global function for the 5 buttons.
Yes. Use something like this:
function buttonClicked(number) {
var img = document.getElementById("banner");
img.src = baners[number]
i = number; // set current loop position
}
then call buttonClicked(0) from button1, buttonClicked(1) from button2 and so on. If you want to automatically attach the handlers to the button using a for-loop, check out JavaScript closure inside loops – simple practical example.

How to mimic mouse movement and event

I have absolutely no clue how javascript works and I'm trying to add code to my script that will mimic mouse movement. What I'm trying to do is purchase shoes from Nike using a bot. All my bot does is add my size to the cart upon clicking the link from twitter but I understand that it'll be detected as a bot if I don't have a mouse event. Any help would be appreciated. Thanks.
var size = "12";
var amount = 1;
function addToCart() {
var sizesList=document.getElementsByName("skuAndSize")[0];
function setQuantity() {
document.getElementsByName("qty")[0].selectedIndex = amount-1;
}
function setSizeValue() {
for (var i=0; i<sizesList.length; i++){
if(sizesList.options[i].text == size) {
document.getElementsByName("skuAndSize")[0].selectedIndex = i;
setQuantity();
}
}
}
if(sizesList != undefined) {
setSizeValue();
document.getElementsByClassName("add-to-cart nsg-button--nike-orange") [0].click();
} else {
setTimeout("addToCart()", 250);
}
}
setTimeout("addToCart()", 250);
This sounds very hackish. Why would you ever need a bot to buy shoes from Nike? Also, Java !=Javascript. You're using Javascript to do this.
For simulating mouse events, check out Event constructors

How to get the drawn rectangle element in Raphael?

I want to know what is the way of getting elements drawn using the Raphael.js.I tried with getById but it is not at all working.Please help me to overcome this issue.
//When the user clicks on the circle i am getting the Circle ID and wants to get the //rectangle which is also having the same ID as Circle but with different prefix.
function addCircleClick(obj)
{
obj.click(function(event)
{
alert(paper+" getRect ID 1"+this.id);.
var getRect;
try
{
var getRect = paper.getById(this.id);////This below line(paper.getById(this.id)) is not working,even Circle object i am not able to get
}
catch(e)
{
alert(e);//Issue here
}
alert("getRect ID 2 "+getRect);
obj.attr({"stroke":"red"});
});
}
I think your problem is that you're trying to use paper as shown in the example. Hopefully this helps you out.
var paper = Raphael("field1", 240, 400, actions);
var attrs = {
fill: "#FFF"
};
function actions() {
var that = this;
var circle = that.circle(50,50,10);
circle.attr(attrs);
circle.click(function(event) {
console.log(this.id); //elements id
console.log(that.getById(this.id)); //clicked element
console.log(paper.getById(this.id)); //doesn't work
});
};
EDIT: Reread your question and think I may have misunderstood it. Anyway I'm not quite sure what you mean with getting the same id with different prefix. Every element gets unique number id.

Javascript if/else statement using image src as condition

I have a voting script with an arrow system (upvotes and downvotes).If user clicks upvote, the arrow changes to the green arrow, meaning vote registered. If they click again, I want the arrow to revert back to the original image. However, using my code, it changes the image on the first like, but doesn't revert back on a second click.
if (like.src = 'vote_triangle.png') {
like.src = 'vote_triangle_like.png';
} else {
like.src = 'vote_triangle.png';
}
Use a more lenient if statement like:
if (like.src.indexOf('vote_triangle.png')!=-1) {
like.src = 'vote_triangle_like.png';
} else {
like.src = 'vote_triangle.png';
}
I know it's a very old thread, but I would like to add my findings here for future reference.
I found the following code wasn't working:
function swapImage() {
var element = document.getElementById("myImage");
if (element.src == "image1.png") {
element.src = "image2.png";
} else {
element.src = "image1.png"
}
}
Showing alerts containing the element.src taught me it contained the full path to the image in my local machine. Thus, the if statement had been always evaluated to false.
To fix that in a logical manner, what I did was get the attribute of the element, as the following code shows.
function swapImage() {
var element = document.getElementById("myImage");
if (element.getAttribute("src") == "image1.png") {
element.src = "image2.png";
} else {
element.src = "image1.png";
}
}
By using the function getAttribute("attributeName"), I was able to retrieve the path contained in the src relatively to the project directory.
I would suggest, instead of using img soruce as conditional statement, use a global variable, change its state once the upvote is clicked by say +1 and for downvotes -1.
//when 0, show upvote image, make it a global by declaring before any function
var UpVote = 0;
//when upvote clicked, when greater than 0, show down vote img
UpVote = UpVote +1 ;
//conditional logic for img source
if(UpVote > 0){
like.src = 'vote_triangle.png';
}
else{
like.src = 'vote_triangle_like.png';
}

Categories

Resources