0

I have a problem to all my eventListeners working... I need :

  • one 'click' for each 'label' HTML tags ( they are removed when clicked)
  • one 'keydown' on backspace key (it removes the last 'label' from the document.)

Both invoke a function taking one element as a parameter. In below code, the keydown is not working... Can anyone see the problem ?? thanks!

HTML :

<div id="motscles">
    <label class="motcle">pouet</label>
    <label class="motcle">youpi</label>
    <label class="motcle">...</label>
    <input class="inputMotsCles" id="motsclesInput" required="true" type="text">
</div>

JS :

var motsclesList = document.getElementById('motscles');
var motsclesInput = document.getElementById('motsclesInput');
var motscle = document.querySelectorAll('.motcle');

// on keydown
motsclesInput.addEventListener("keydown", function (e) {
    if (e.which == 8) { // backspace
        supprimeMotCle(motsclesInput.previousElementSibling);
    }
});

// click a "
for (var i = 0; i < motscle.length; i++) {
    motscle[i].addEventListener('click', supprimeMotCle(motscle[i]));
}


// the function removes the element given in parameter
function supprimeMotCle(blocMotCle) {

    return function () {
        blocMotCle.remove();
    };
}
Bertrand Engogram
  • 539
  • 1
  • 5
  • 13
  • possible duplicate of [adding 'click' event listeners in loop](http://stackoverflow.com/questions/8909652/adding-click-event-listeners-in-loop) – A1rPun Jun 08 '15 at 11:55
  • You say that the keydown handler is not working, but is the click handler working? It doesn't look to me like it ought to... – Adrian Schmidt Jun 08 '15 at 11:55
  • 3
    `which` is IE specific. Use `keyCode`. `var key = e.keyCode || e.which` – marekful Jun 08 '15 at 11:56
  • I retracted my close vote but the marked answer is still relevant :) – A1rPun Jun 08 '15 at 11:56
  • `supprimeMotCle(motsclesInput.previousElementSibling)` doesn't do anything, it returns a function. Did you intend `supprimeMotCle(motsclesInput.previousElementSibling)()`? @A1rPun there is no closure issue, your marked answer is not relevant. – Halcyon Jun 08 '15 at 11:57
  • A1rPun : I found this https://jslinterrors.com/dont-make-functions-within-a-loop .. and followed the advised structure. Halcyon : good on you mate, it's now working! I owe you one beer ! :) – Bertrand Engogram Jun 08 '15 at 14:02

1 Answers1

0
function supprimeMotCle(blocMotCle) {

    return function () {
        blocMotCle.remove();
    };
}

...is returning a function, which is definitely not what you want to obtain. Instead remove the return statement because you don't need it.

This will work:

// the function removes the element given in parameter

function supprimeMotCle(blocMotCle) { 
    blocMotCle.remove();
}
Endre Simo
  • 11,330
  • 2
  • 40
  • 49
  • yes it works... BUT (of course...) : 1) if the listener is created with : addEventListener('click', function() { supprimeMotCle(this) } --> JS lint tells it is not recommended to created a function with a loop... 2) if the listener is created as above, the function is called upon creation, and my initial label blocks are deleted... – Bertrand Engogram Jun 08 '15 at 13:55