Event Listener fires on wrong target / function executes at the wrong time

Issue

I'm having a problem with an event listener which is firing on the wrong object.

To see it, please click on one td with a number below 'Min'

Here's the full js code:

var minedit = document.getElementsByClassName('min-edit');
     for (var m=0;m<minedit.length;m++){
        minedit[m].addEventListener('click', edit);
     }
    
    function edit(){
        this.removeEventListener('click', edit);
        var avalue = this.innerHTML;
    
        if (this.className.indexOf('input-open')>=0){
    
 
    }
    
    else {
        this.className += 'input-open';
        var content = '';
        content += '<div class="input-group editable-input"><input type="text" id="minedit'+this.parentNode.childNodes[1].id+'" value="'+parseFloat(avalue).toFixed(2)+'" class="form-control"><span class="input-group-addon editable-input" id="savethis"><i class="ion-android-done" ></i></span><span class="input-group-addon editable-input"><i class="ion-android-close" id="close"></i></span></span></div>';
        this.innerHTML = content;
    
     
        var valuenow = document.getElementById('minedit'+this.parentNode.childNodes[1].id).value;
        var id = document.getElementById('minedit'+this.parentNode.childNodes[1].id).id;
    
        var save = document.getElementById('savethis');
        save.addEventListener('click', savethis(valuenow, id));
    
    
    }
    function savethis(v,id) {
    
        console.log(id.replace('minedit','')+'Button clicked: '+v);
    }
    
    }

Here's a fiddle

What is happening:

With this lines:

 var content = '';
 content += '<div class="input-group editable-input">
             <input type="text" id="minedit'+this.parentNode.childNodes[1].id+'" value="'+parseFloat(avalue).toFixed(2)+'" class="form-control">
             <span class="input-group-addon editable-input" id="savethis"><i class="ion-android-done" ></i></span>
             <span class="input-group-addon editable-input"><i class="ion-android-close" id="close"></i></span></span></div>';
 this.innerHTML = content;

I'm creating an input field and two spans, one of them with the id "savethis". Now I add the eventlistener on savethis:

 var valuenow = document.getElementById('minedit'+this.parentNode.childNodes[1].id).value;
 var id = document.getElementById('minedit'+this.parentNode.childNodes[1].id).id;

 var save = document.getElementById('savethis');
save.addEventListener('click', savethis(valuenow, id));

But the function savethis is called in the moment the innerHTML changes to the input field. You can see this in the fiddle when clicking on one of the 'Min' TDs.

Can someone help me with this? Why is the function called on click on a row and not on click on the span?

Solution

In the addEventListener you are calling the savethis function instead of passing it in

Change

save.addEventListener('click', savethis(valuenow, id));

to

save.addEventListener('click', savethis);

And find another method to use valueNow and id in the savethis function.

This explains how to pass parameters: https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener

Answered By - Derk