6 Replies Latest reply on Aug 14, 2014 9:01 AM by danstein01

    Having trouble trying to control a series of elements using a for-loop

    danstein01 Level 1

      I have a number of elements in my composition, which I would like to control via a for-loop. Let's say I have 5 elements, named "Element1," "Element2"..."Element5." I have created an array that stores the element names:

       

      elementArray = ["Element1","Element2,"Element3","Element4","Element5"]

       

      Now, I would like to hide all these elements using a for-loop:

       

      for (var i=0; i<elementArray.length; i++) {

      elementArray[i].hide();

      }

       

       

      However, when I run this code I get an error, "Javascript error in event handler! Event Type = element"

       

      I'm pretty sure I'm not understanding something to do with namespace or scope here - can anyone help me with this?

        • 1. Re: Having trouble trying to control a series of elements using a for-loop
          resdesign Adobe Community Professional & MVP

          You are missing a double quote in your array and you have a code error to call the elements.

           

          var elementArray = ["Element1","Element2","Element3","Element4","Element5"];

          for (var i=0; i<elementArray.length; i++) {

          sym.$(elementArray[i]).hide();

          }

          • 2. Re: Having trouble trying to control a series of elements using a for-loop
            danstein01 Level 1

            Thanks, redesign - but that's not the problem I'm having. What I posted was a quick, abstracted example, and I apologize for the poor typing on my part, but the issue is not in constructing the array.

             

            I still think that I'm not understanding something to do with scope. I will rephrase the question, with a bit more detail:

             

            My composition consists of a map of the United States. The user needs to be able to click on a state to select it, at which point that state becomes highlighted. I am constructing this map by using a base image which shows the entire map. Above each state, I have two elements. - First is an image of the state, but in the highlighted color - this element is named "State_on", and is initially hidden. Above "State_on," I have an identical image, NOT hidden, but with opacity set to 0 - this element serves as the button to receive the mouseclick.

             

            In code, I first construct an array containing the names of the highlight states . For my example, I will only use two states:

            var stArray = ["WA_on", "WY_on"];

             

            I then have a function which will loop through the array of state names and turn them all off:

             

            for (var i=0; i<stArray.length; i++)

                            {

                            var state = stArray[i];

                            sym.$(state).hide();

                            }

             

            If I put this piece of code into each button, it works as expected. However, I would like to consolidate things by putting this code into a function clearAll(), which I can then attach to each button as needed.

             

            So i have this function:

             

            function clearAll() {

                 for (var i=0; i<stArray.length; i++)

                            {

                            var state = stArray[i];

                            sym.$(state).hide();

                            }

                 }

             

            Then each button gets this code:

             

            Symbol.bindElementAction(compId, symbolName, "${_WA_off}", "click", function(sym, e) {

                 clearAll();

                 sym.$("WA_on").show();

            }

             

            Once I do this, my buttons no longer work, and the console shows me the "Javascript error in event handler! Event Type = element" error.

             

            So it seems to me that something is wrong in the way I am scoping or addressing my elements inside the clearAll() function - as I say, if I put the code individually into each button it works, but encapsulating it into a function and then calling the function from within the button does not work.

            • 3. Re: Having trouble trying to control a series of elements using a for-loop
              joel_pau Level 5

              You must specify to Mary where you put this snippet:

              function clearAll() {

                   for (var i=0; i<stArray.length; i++)

                             {

                              var state = stArray[i];

                              sym.$(state).hide();

                              }

                   }

              I mean: what panel?

              1 person found this helpful
              • 4. Re: Having trouble trying to control a series of elements using a for-loop
                danstein01 Level 1

                Hi, Joel -

                 

                My clearAll() function is in the main code window. The entire code window (including Edge-generated comments) looks like this:

                 

                /***********************

                * Adobe Edge Animate Composition Actions

                *

                * Edit this file with caution, being careful to preserve

                * function signatures and comments starting with 'Edge' to maintain the

                * ability to interact with these actions from within Adobe Edge Animate

                *

                ***********************/

                (function($, Edge, compId){

                var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

                 

                var selectedState;

                 

                var stArray = ["WA_on", "WY_on"];

                 

                function clearAll() {

                         for (var i=0; i<stArray.length; i++){

                         var myState = stArray[i];

                         sym.$(myState).hide();

                         }

                }

                 

                   //Edge symbol: 'stage'

                   (function(symbolName) {

                 

                      Symbol.bindElementAction(compId, symbolName, "${_WY_off}", "click", function(sym, e) {

                               clearAll();

                            // do some button stuff

                      });

                      //Edge binding end

                 

                      Symbol.bindElementAction(compId, symbolName, "${_WA_off}", "click", function(sym, e) {

                               clearAll();

                             // do some button stuff

                       });

                      //Edge binding end

                 

                   })("stage");

                   //Edge symbol end:'stage'

                 

                })(jQuery, AdobeEdge, "EDGE-7029468");

                 

                 

                I appreciate any help that anyone can provide in getting this working - thanks!

                • 5. Re: Re: Having trouble trying to control a series of elements using a for-loop
                  joel_pau Level 5

                  So, you put your code within function("stage") panel.

                  functionStage.jpg

                  You cannot use sym (i mean script) within this panel.

                   

                  Here is a case: How to use this panel without sym?

                   

                  1) Within function("stage") panel, i script this code:


                  function clearAll() {

                     $.each(arguments,function(index,item){ item.hide(); })

                  }


                  2) Within a click event, i script this code:

                   

                  Symbol.bindElementAction(compId, symbolName, "${_Button}", "click", function(sym, e) {

                   

                  clearAll(sym.$("Rectangle"),sym.$("Ellipse"));

                  });

                   

                  Therefore, i reverse your issue. Because i move sym from function("stage") to one click event.


                  Note: It will be smarter to use a class.

                  Mary will explain.

                  1 person found this helpful
                  • 6. Re: Having trouble trying to control a series of elements using a for-loop
                    danstein01 Level 1

                    Thanks, Joel.

                     

                    removing "sym" from the object reference in the clearAll() function helped me to solve the problem.