Assign onclick event inside loop

Question

Working with onclick event assigned inside the loop , but problem has occured

matej.prototype.animacia = function () {
 var tab = document.getElementById("table");
 var x = tab.querySelectorAll(".lol td");
var kontrola=true;
 for (var i = 0; i < x.length; i++) {
     x[i].onclick = function (e) {
         e = e ? e : window.event;
         var decko = e.target.querySelector(".bodky");
         var bastard = e.target.querySelector(".hidden");
         var hore = 0;

             kontrola=false;
         var id = function () {

             decko.style.opacity = 1 - hore;
             hore += 0.05;
             if (hore < 1) {
                 setTimeout(function () {
                     id();
                 }, 10);
             } else {
                 decko.style.display = "none";
                 decko.style.opacity = 0;
                 (function (e) {
                     e = e ? e : window.event;
                     var dole = 0;
                     var di = function () {
                         bastard.style.display = "inline";
                         bastard.style.opacity = 0 + dole;
                         dole += 0.05;
                         if (dole < 1) {
                             setTimeout(function () {
                                 di();
                             }, 100);
                         } else {
                             bastard.style.opacity = 1;
                         }

                     };
                     di();
                 })();
             }

         };
         id();

     }
        };}

It "works" as expected but i have to click on the "TD" elements in order(from the last one to the first) otherwise it will throw an error . Why does it happen ? working demo http://jsfiddle.net/Trolstover/qxd32hkk/5/

Answer 1

The recursive calls to setTimeout to handle the transitions, along with the event handlers added to every <td> probably give some issue with scope, and a variable somewhere is likely being overwritten when it shouldn't be.

I've simplified the animacia() function to add one event handler to the table and use event.target to identify the element that's been clicked.

Further, I've added a CSS transition to the style sheet so that the browser controls the fadeOut and fadeIn animations instead of using JavaScript to do it. The fade out-fadein sequence is controlled by an event handler.

The new CSS:

    <style>
        .hidden {
            display:none;
            opacity:0;
            transition:opacity 2s;
        }
        .bodky {
            opacity:1;
            display:inline;
            transition:opacity 200ms;
        }
        td{
            cursor:pointer;
            width:200px;
        }
    </style>

The new animacia() function:

   matej.prototype.animacia = function () {

        // Add an event listener to the table so that only one is required.
        // Use event.target to get the element that was clicked
        table.addEventListener('click', function(e){
            // Get the elements we're going to fade
            let decko = e.target.closest('td').querySelector(".bodky");
            let bastard = e.target.closest('td').querySelector(".hidden");

            // Set up a fadeOutFadeIn function so that it's easy to identify later
            // This will be called by the transitionend event on our fadeOut element
            // It removes the faded element from display, add the new element and starts the fade In
            let fadeOutFadeIn = function(){
                decko.offsetHeight;  // This forces a reflow to ensure that the transition is displayed.
                decko.style.display = 'none';
                bastard.style.display='inline';
                decko.offsetHeight;
                bastard.style.opacity = 1;
                decko.removeEventListener('transitionend', fadeOutFadeIn);
            };

            // Add the transtionend handler to the element that will be faded out
            decko.addEventListener('transitionend', fadeOutFadeIn);
            // Set the new opacity for the fadeOut element. CSS controls the duration
            decko.style.opacity = 0;
        });
        }

Here's the complete code as a working snippet.

 window.onerror = function (m, u, l) { alert('Javascript Error: ' + m + '\\nURL: ' + u + '\\nLine Number: ' + l); return true; } var lol = document.getElementsByClassName("lol"); var kek = []; function matej() { var self = this; self.children = lol; self.before = []; self.after = []; self.shortIt(); self.nahrada(); self.animacia(); } matej.prototype.shortIt = function () { Array.prototype.forEach.call(this.children, function (element) { Array.prototype.forEach.call(element.children, function (td) { var range = document.createRange(); var span = document.createElement("span"); span.setAttribute("class", "hidden"); range.setStart(td.childNodes[0], 1); range.setEnd(td.childNodes[0], td.childNodes[0].length); range.surroundContents(span); }); }); }; matej.prototype.nahrada = function () { var skryty = document.getElementsByClassName("hidden"); Array.prototype.forEach.call(skryty, function (element) { var span = document.createElement("span"); var y = document.createTextNode("..."); span.appendChild(y); span.setAttribute("class", "bodky"); var tato = element.parentNode; tato.insertBefore(span, element); }); }; matej.prototype.animacia = function () { // Add an event listener to the table so that only one is required. // Use event.target to get the element that was clicked table.addEventListener('click', function(e){ // Get the elements we're going to fade let decko = e.target.closest('td').querySelector(".bodky"); let bastard = e.target.closest('td').querySelector(".hidden"); // Set up a fadeOutFadeIn function so that it's easy to identify later // This will be called by the transitionend event on our fadeOut element // It removes the faded element from display, add the new element and starts the fade In let fadeOutFadeIn = function(){ decko.offsetHeight; // This forces a reflow to ensure that the transition is displayed. decko.style.display = 'none'; bastard.style.display='inline'; decko.offsetHeight; bastard.style.opacity = 1; decko.removeEventListener('transitionend', fadeOutFadeIn); }; // Add the transtionend handler to the element that will be faded out decko.addEventListener('transitionend', fadeOutFadeIn); // Set the new opacity for the fadeOut element. CSS controls the duration decko.style.opacity = 0; }); } var sprav = new matej();

 .hidden { display:none; opacity:0; transition:opacity 2s; } .bodky { opacity:1; display:inline; transition:opacity 200ms; } td{ cursor:pointer; width:100px; }

 <table style="width:100%" id="table"> <tr class="lol"> <td data-fact="true">Jill</td> <td data-fact="true">Jilla</td> <td data-fact="true">50</td> </tr> <tr class="lol"> <td data-fact="true">Eve</td> <td data-fact="true">Jackson</td> <td data-fact="true">94</td> </tr> </table>