0

An event seems to start automatically even if it is not called. It should only start if something is typed.

The code automatically takes each cell and applies an event to the click that causes a box to appear and according to the cell changes the information contained in them where there is an input which in turn has an event when something is typed but starts automatically .

After a cell is clicked (elementToChange is the inner text of the clicked cell): js

function changeMemberSurname(elementToChange) {
    var showOptions = document.getElementById("showChangeOptions");
    showOptions.className = "show";
    var input = document.createElement("input");
    input.value = "Surname";
    input.type = "text";
    input.id = "ChangeMemberInput";
    input.name = "Surname";
    input.addEventListener("keyup", changeMemberOldNew(elementToChange));
    showOptions.appendChild(input); //append it to the empty div
};
function changeMemberOldNew(elementToChange) {
    var inputValue = document.getElementById("ChangeMemberInput").value;
    var showValue =  document.getElementById("showChangeText");
    showValue.innerText = "before: " + elementToChange + " -  after: " + inputValue + ".";
};

changeMemberOldNew is the function that starts automatically but should not. Why it autostart? Thanks in advance.

Andrea Fiore
  • 71
  • 9
  • Hi, i see it is the same problem, but when i search for the answer it wasn't appeared. – Andrea Fiore Aug 05 '19 at 12:07
  • Well, you got two answers to your question anyway. Both of which explains the problem and one that offers a working solution for your use-case. – Lennholm Aug 05 '19 at 14:06

2 Answers2

1

When you add your event listener, you're actually invoking the function and passing its return (which is undefined) to addEventListener(). You need to pass the function itself to addEventListener(), which is done with the function name but without parenthesis (it's the parenthesis that invokes the function). However, since you need to pass an argument to the function it's not that straight forward but you can solve this by wrapping it in a handler function, like this:

var keyupHandler = function() {
  changeMemberOldNew(elementToChange);
};
input.addEventListener("keyup", keyupHandler);

Now it's the keyupHandler() function that gets passed to addEventListener() and that function is what invokes the changeMemberOldNew() function with the argument at the proper time.

Lennholm
  • 7,205
  • 1
  • 21
  • 30
  • You can still do it in one line binding your evvent hander to the parameter elementToChange, like: ``` input.addEventListener("keyup", changeMemberOldNew.bind(null, elementToChange)); – ejosafat Aug 05 '19 at 12:00
  • 1
    @ejosafat It can also be done with an anonymous function (which I did before I edited the answer). I wrote the answer like this in order to make the concepts of function references vs function invocations more apparent. – Lennholm Aug 05 '19 at 12:38
0

The problem is that you are calling the function, then passing the result of the function call to the event listener, rather than passing the function itself. You need to get rid of the argument in the parentheses:

input.addEventListener("keyup", changeMemberOldNew);

kshetline
  • 12,547
  • 4
  • 37
  • 73
  • So i have to toggle elementToChange inside the input function? And if i pass it with other variable? Ex: var xxx = elementToChange; input.addEventListener("keyup", changeMemberOldNew(xxx)); – Andrea Fiore Aug 05 '19 at 10:47
  • Don't pass any argument at all. When the event happens, the event passes its own event argument. That requires another change to your code, that I'll edit the answer for. – kshetline Aug 05 '19 at 11:10
  • Now that I look at your code more, it's just not going to do what you want it to do, even when you connect the event listener correctly. As soon as the event occurs, that value of the input will have already changed. If you want to show before and after values, you'll have to save the "before" value separately. – kshetline Aug 05 '19 at 11:17