Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jimeast

after dynamically adding event listeners buttons stop working

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

The problem seems to be in my event handler "move_box". The event listeners were apparently added, if I manually replace the i in menu with a 0 or 1 in the move_box function clicking the buttons cause the boxes to move.  I have this up on JSFIddle  http://jsfiddle.net/jimeast123/F4WkU/1/

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<style type="text/css">
.box {
margin: 0px;
height: 50px;
width: 50px;
background-color: blue;
}
li {list-style: none;}
.inner {; display: block;}
.inner li, .box {display: block;}

#outer li { display: inline-block;}
</style>
</head>
<body>
<ul id="outer">
<li><button type="button" class="toggle" name="btn1">Open</button>
<ul class="inner">
<li><div class="box"></div></li>
</ul>
</li><!-- end of outer li -->
<li><button type="button" class="toggle" name="btn2">Open</button>
<ul class="inner">
<li><div class="box"></div></li>
</ul>
</li> <!-- end of outer li -->
</ul> <!-- end of outer -->
<script>

var menu = document.getElementsByClassName('box');
var btn = document.getElementsByClassName('toggle');

function move_box(e) {
if(this.innerHTML === 'Open') { 
TweenLite.to(menu[i], 2, {y: 100, ease:Power2.easeOut});
this.innerHTML = 'Close';
} else {
TweenLite.to(menu[i], 2, {y: 0, ease:Power2.easeOut}); 
this.innerHTML = 'Open'; 
}
}

for (var i = 0; i < btn.length; i++ ) {
btn[i].addEventListener("click", move_box, false);
}


</script> 
</body>
Link to comment
Share on other sites

I recommend you check out how to use browser developer tools to debug your pages
 
Chrome
Firefox (or Firebug addon)
Internet Explorer
 
If you open the Console, you'll see that every time you click open there is a clear error that you cannot tween a null target. This means that menu === null. You are only defining i in that event listening loop, so I think you'll need to reconsider how you find and target the boxes inside move_box. In jQuery I might try something like $(this).parent().find('.box')

  • Like 1
Link to comment
Share on other sites

I use the console.  I found a solution but it isn't the elegant solution I was hoping for but it will do for now.  If anyone sees a "elegant" solution for this please add it.  Thanks!

 

my solution:

 

<script>
var i;
var menu = document.getElementsByClassName('box');
var btn = document.getElementsByClassName('toggle');

function move_box(e) {
  var j;
  var zzz = this.getAttribute("id"); 
  if (zzz == "btn0"){j = 0;} else {j = 1;}
    if(this.innerHTML === 'Open') { 
      TweenLite.to(menu[j], 2, {y: 100, ease:Power2.easeOut});
      this.innerHTML = 'Close';
    } else {
      TweenLite.to(menu[j], 2, {y: 0, ease:Power2.easeOut}); 
      this.innerHTML = 'Open'; 
  }
}

for ( i = 0; i < btn.length; i++ ) {
  btn[i].addEventListener("click", move_box, false);
  btn[i].setAttribute("id", "btn" + i);
}

</script> 
Link to comment
Share on other sites

this is better:

 

<script>
var i;
var menu = document.getElementsByClassName('box');
var btn = document.getElementsByClassName('toggle');

function move_box(e) {
  var j;
  var id = this.getAttribute("id");
  j = id.substr(3,1); //get digit at end of id.
  if(this.innerHTML === 'Open') { 
    TweenLite.to(menu[j], 2, {y: 100, ease:Power2.easeOut});
    this.innerHTML = 'Close';
  } else {
    TweenLite.to(menu[j], 2, {y: 0, ease:Power2.easeOut}); 
    this.innerHTML = 'Open'; 
  }
}

for ( i = 0; i < btn.length; i++ ) {
  btn[i].addEventListener("click", move_box, false);
  btn[i].setAttribute("id", "btn" + i);
}
</script> 
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×