after dynamically adding event listeners buttons stop working

jimeast · April 12, 2014

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>

jamiejefferson · April 13, 2014

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')

jimeast · April 13, 2014

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>

jimeast · April 13, 2014

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>

Create an Account

Sign In

after dynamically adding event listeners buttons stop working

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

HTML5 / JS

Learning

Support

Our Company