1

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
baao
  • 71,625
  • 17
  • 143
  • 203
  • @ibrahimmahrir I can't see how it is duplicated, the suggested link is about onLoad, this question about action not working for specific target! – Al-Mothafar Dec 03 '17 at 16:10
  • 1
    @Al-Mothafar The titles are different but the problem is the same. _executes at the wrong time_ here is _fires on page load_ (which is also the wrong time) in the dupe. I actually was looking for a dupe for another question and found these two and noticed that they were the same so decided to close the least famous one (this one). – ibrahim mahrir Dec 03 '17 at 16:15
  • @Al-Mothafar If you look closely you'll see that in both questions OP is executing the function while adding the event listener: `savethis(valuenow, id)` here, `alert("clicktrack")` in dupe – ibrahim mahrir Dec 03 '17 at 16:16
  • Yeah, it's a dupe. How did you guys find this 3 year old question??? @ibrahimmahrir – baao Dec 03 '17 at 16:17
  • @baao Goooooogle. They must have enhanced their search algorithms over the course of these passed 3 years. – ibrahim mahrir Dec 03 '17 at 16:18
  • Ah okay. @ibrahimmahrir . I would have deleted the question a while ago, but it's a dupe target to other questions, too... – baao Dec 03 '17 at 16:19
  • 1
    OK I got it, actually Already experienced with JS, it is just as Ibrahim said he found that duplicate regarding solution :) – Al-Mothafar Dec 03 '17 at 16:19
  • 1
    @baao No no don't delete it. The different titles may help people get to that dupe target. – ibrahim mahrir Dec 03 '17 at 16:20

1 Answers1

2

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

Derk
  • 73
  • 4