I'm trying to make certain things happen when I click on my '.words' class and it works if I just target one (using the document.querySelector). But I want to target every element with class '.words' and apply the changes when I click on them. For some reason I cannot figure out how to do this. Here's my code:
var food = document.querySelectorAll('.words');
function chicken() {
for (let i = 0; i < food.length; i++){
if(food[i].style.color === 'white'){
food[i].style.color = 'red';
} else if(food[i].style.color === 'red'){
food[i].style.color = 'blue';
} else {
food[i].style.color = 'white';
}
}
}
food[i].addEventListener('click', chicken, false);
Related
I am using Animate CC 2017 and Canvas as my document. I have an animated button and a Movieclip. I want to know How to Toggle the Movieclip to appear on my Animated button's mousehover.
Button Instance Name is : button_1
Clip Instance name is : injector
I have only one keyframe on my animated screen.
Below is the code what I am doing
var frequency = 3;
stage.enableMouseOver(frequency);
this.button_1.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler()
{
if (injector.alpha == 0)
{
injector.alpha = 1;
}
else
{
injector.alpha = 0
}
}
So this condition is not working but alert working fine.
Did you check for javascript errors in the console?
If not, I suspect it's because 'injector' is not in scope. Try this:
var frequency = 3;
stage.enableMouseOver(frequency);
this.button_1.addEventListener("mouseover", fl_MouseOverHandler);
var ref = this;
function fl_MouseOverHandler()
{
if (ref.injector.alpha == 0)
{
ref.injector.alpha = 1;
}
else
{
ref.injector.alpha = 0
}
}
I'm attempting to change the color of several display objects using colorTransform but can't get it working -
private function getChildren(mc:DisplayObjectContainer):Array {
var children:Array = [];
for (var i:int = 0; i < mc.numChildren; i++) {
var child:DisplayObject = mc.getChildAt(i);
if(child.name == "color1"){
children.push(child);
} else if(child.name == "color2"){
children.push(child);
}
if (child is DisplayObjectContainer) {
var childChildren:Array = getChildren((child as DisplayObjectContainer));
children = children.concat(childChildren);
}
}
return children;
}
and in my enter stage event:
var mychildren:Array = getChildren(this.spartan);
for each(var child:DisplayObject in mychildren) {
if(child.name == "color1"){
child.transform.colorTransform = _colorTransform1;
}
trace(child.name);
I've declared the color as _colorTransform1.color = 0xCCFF00
My character subsists of several movieclips that are currently either instances of color1:red or color2:green. As a new programmer I'm wondering if I should have proceeded with another method?
trace(child.name)
if(child.name == "color1"){
trace("found color!")
}
Alright, I kind of feel a little stupid right now because the answer was so darn obvious...
While attempting to change the color of the movieclip I had forgotten that the movieclip itself had not loaded yet. To fix this issue all I had to do was call the movieclip frame BEFORE I changed the color.
I'm making a "spit" card game and I'm trying to be able to have 3 cards on the stage at once to be able to drag to the pile. So my question is how do I have multiple instances of the same object on the stage, but be able to assign each card different frames, etc. Here is the code to understand the context of it.
"cardArray" has 53 frames, 52 of which have a card face, 53rd is a "deck" picture.
//variables, constants
var cardDeck:Array = new Array();
var timer:Timer = new Timer(2000);
var j:int = 0;
var card:MovieClip = new CardArray();
var cardInDeck:Boolean;
const deckSize:int = 52;
//events:
card.addEventListener(MouseEvent.MOUSE_DOWN,fDown);
card.addEventListener(MouseEvent.MOUSE_UP,fUp);
startRandomise();
//This is where the unshuffled "deck" is created - values loaded into the array.
function createDeck():void
{
var i:int;
for(i =0; i<deckSize; i++)
{
cardDeck[i] = i+1;
}
}
function randomizeDeck( a : *, b : * ):int
{
return (Math.random()>.5) ? 1 : -1;
}
//Grab the value from the (presumably) current frame of the card
function convertCard(cardNo:int):int
{
var deckPos:int;
if (cardNo <= deckSize/4)
{
deckPos = cardNo;
}
else if (cardNo > deckSize/4 && cardNo <= deckSize/2)
{
deckPos = cardNo -13;
}
else if (cardNo > deckSize/2 && cardNo <=deckSize*3/4)
{
deckPos = cardNo -deckSize/2;
}
else if (cardNo >39)
{
deckPos = cardNo -39;
}
return deckPos;
}
btn.addEventListener(MouseEvent.MOUSE_UP,showArray);
function showArray(event:MouseEvent):void
{
if(j<deckSize /2)
{
addChild(card);
card.gotoAndStop(cardDeck[j]);
trace(cardDeck[j]+","+deckCompare[j]);
j++;
}
if(cardInDeck)
{
card.x = 200;
card.y = 200;
cardInDeck+false;
}
}
function fDown(evt:MouseEvent)
{
card.startDrag();
}
function fUp(evt:MouseEvent)
{
stopDrag();
if(card.hitTestObject(deck))
{
trace("deck: "+convertCard(deck.currentFrame));
trace("card: "+convertCard(card.currentFrame));
if(convertCard(card.currentFrame) == convertCard(deck.currentFrame)+1 || convertCard(card.currentFrame) == convertCard(deck.currentFrame)-1 || convertCard(card.currentFrame) == 13 && convertCard(deck.currentFrame) == 1 || convertCard(card.currentFrame) == 1 && convertCard(deck.currentFrame) == 13 || convertCard(deck.currentFrame) == 14)
{
deck.gotoAndStop(card.currentFrame);
removeChild(card);
cardInDeck=true;
}
else
{
card.x = 200;
card.y = 200;
}
}
else
{
card.x = 200;
card.y = 200;
}
}
function startRandomise():void
{
createDeck();
cardDeck.sort(randomizeDeck);
cardDeck.sort(randomizeDeck);
trace("random: "+cardDeck);
trace("deckCompare: "+deckCompare);
card.x = 200;
card.y = 200;
deck.gotoAndStop(53);
}
To have multiple cards, you need to instantiate more than one card. I don't know anything about the card game spit and don't understand the purpose of many of your functions, but you'll want to do something along these lines:
Create a function that generates (instantiates) a new card:
function createCard(faceFrame):MovieClip {
var tmpCard:MovieClip = new CardArray(); //this creates a new instance of a card
tmpCard.addEventListener(MouseEvent.MOUSE_DOWN, cardMouseDown); //make the card call the mouse down function when that event is triggered
tmpCard.gotoAndStop(faceFrame); //assign the card it's face (frame)
addChild(tmpCard); //add the card to the screen
return tmpCard;
}
Then, in your mouse down handler (I renamed it to be more clear what is is), you can do the following to card that was mouse downed:
function cardMouseDown(evt:MouseEvent) {
//the events currentTarget property is reference to the item that you attached the listener to, so in this case the card who triggered the mouse down
card = evt.currentTarget as MovieClip; //assign the current clicked card to the global card variable (so we can access it in the mouse up function)
card.startDrag();
//add the mouse up listener on the stage, since there are cases where you can drag so fast that the mouse isn't over the item it's dragging (and then if you were to release the mouse at that moment it wouldn't dispatch the event)
stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUp);
}
Then your mouse up function would look something like this:
function stageMouseUp(evt:MouseEvent) {
//remove the mouse up listener from the stage
stage.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUp);
card.stopDrag();
if(card.hitTestObject(deck))
{
......//rest if the code
Seems like you would want to generate a new card in the showArray function you have? So something like this:
function showArray(event:MouseEvent):void
{
var newCard:MovieClip = createCard(cardDeck[j]);
j++
newCard.y = newCard.x = 200;
trace(cardDeck[j]+","+deckCompare[j]);
}
As an aside, you should consider calling your Card object something more sensible, like Card instead of CardArray, as it's not an array...
here's my code, i don't know why it doesn't remove the event listener.
What i want to do is having some button to turn the sound on and off according to the beat. On the first click it worked perfectly, but when i want to remove the sound on the second click it cannot remove the event listener.
plat.BEAT1.addEventListener(TouchEvent.TOUCH_BEGIN, BEATDown(plat.BEAT1, hihatz, 2));
plat.BEAT2.addEventListener(TouchEvent.TOUCH_BEGIN, BEATDown(plat.BEAT2,cymbalz, 4));
function BEATDown (padNum, sounz, tiempo) {
return function (e:TouchEvent) {
var currentSound:Sound = null;
var currentSoundChannel:SoundChannel;
var active:int;
if (padNum.currentFrame == 1) {
padNum.gotoAndStop(3);
padNum.addEventListener(Event.ENTER_FRAME, PlayBeats);
active = 1;
} else {
padNum.gotoAndStop(1);
padNum.removeEventListener(Event.ENTER_FRAME, PlayBeats);
active = 0;
}
function playSound(sound:Sound):void
{
if (active == 0)
{
// Stop playing ANY sound
currentSound = null;
currentSoundChannel = null;
}
else
{
// Play a different sound
currentSound = sound;
currentSoundChannel = sound.play();
}
}
function PlayBeats(event:Event):void
{
if (tiempo == 1) {
if (fl_SecondsElapsed <= 4) {
playSound(sounz);
}
}
if (tiempo == 2) {
if (fl_SecondsElapsed == 1 || fl_SecondsElapsed == 3) {
playSound(sounz);
}
}
if (tiempo == 4) {
if (fl_SecondsElapsed == 1) {
playSound(sounz);
}
}
}
}
}
EDIT:
The listener i want to remove is padNum.addEventListener(Event.ENTER_FRAME, PlayBeats);
plat.BEAT1 is the button instance. I use multiple instance to trigger different sound, each toggle sound on and off according to the Tiempo count.
I would say it's because you don't add / remove your listener on the same object;
is plat.BEAT1 et plat.BEAT2 are the same? I guess not.
I would recommend you to try by adding the EnterFrame listener on stage on this or on the parent element to the if the event is Removed correctly. Then if you want your object works independently, try to target the right object.
if (padNum.currentFrame == 1) {
padNum.gotoAndStop(3);
stage.addEventListener(Event.ENTER_FRAME, PlayBeats);
active = 1;
} else {
padNum.gotoAndStop(1);
stage.removeEventListener(Event.ENTER_FRAME, PlayBeats);
active = 0;
}
I have a button that automatically adds a child and takes away health once clicked. I also made the button take away 0 if the child = true. However, I have another button that once clicked, it should move to another frame and remove the child. For some reason, it isn't removing the child. Before, I didn't have the button take away 0 if the child = true and the removeChild worked fine. The code is all in a frame named actions on the main timeline.
var createGirlText = new GirlSpeechBoxClass();
if(EnergyNumber <= 0) {
Girl_btn.buttonMode = false;
Girl_btn.mouseEnabled = false;
}
Girl_btn.addEventListener(MouseEvent.CLICK, GirlTalk);
Girl_btn.buttonMode = true;
function GirlTalk(event:MouseEvent){
addChild(createGirlText);
createGirlText.x = 350.95;
createGirlText.y = 488.95;
EnergyNumber -= 10;
if(createGirlText = true){
EnergyNumber -= 0;
}
if(EnergyNumber < 0) {
EnergyNumber = 0;
}
if(EnergyNumber <= 0) {
Girl_btn.buttonMode = false;
Girl_btn.mouseEnabled = false;
}
}
//Action for clicking Main Button
BacktoOutside_btn.addEventListener(MouseEvent.CLICK, gotoMainArea2);
BacktoOutside_btn.buttonMode = true;
function gotoMainArea2(event:MouseEvent){
gotoAndStop("MainArea");
MovieClip(this.root).removeChild(createGirlText);
}
Try createGirlText.parent.removeChild(createGirlText);
It's also worth testing if the parent exists before removing it.