Javascript Newbie: use element in function [duplicate]

Question

The script below doesn't work and I need some help to find the reason. Because the function works as expected if I use it directly with the variable "input1" instead of "field", I think line 2 is the problem. I think using updateValue(input1) doesn't work, but I don't get any error report in the browser console.

Coloring a text input red or green, if the inserted code is found or not by API call

const input1 = document.getElementById("voucher1");
input1.addEventListener("change", updateValue(input1));

function updateValue(field) {
  var InputOrgColor = field.style.backgroundColor;
  const apiUrl = 'https://hook.eu1.make.com/wr3p7mnuqokj9...wns2n?voucher-id=' + field.value;
  if (field.value === ``) {
    field.style.backgroundColor = InputOrgColor;
    document.getElementById("submit").style.visibility = `visible`;
  } else
    fetch(apiUrl)
    .then(response => {
      if (response.status === 200) {
        field.style.backgroundColor = `#99ffcc`;
        document.getElementById("submit").style.visibility = `visible`;
      } else if (response.status === 201) {
        field.style.backgroundColor = `#ffcccb`;
        document.getElementById("submit").style.visibility = `hidden`;
        alert("Der Gutscheincode wurde nicht gefunden. Bitte überprüfe Deine Eingabe.");
      } else if (response.status === 202) {
        field.style.backgroundColor = `#ffcccb`;
        document.getElementById("submit").style.visibility = `hidden`;
        alert("Der Gutscheincode wurde zwar gefunden, aber der Gutschein ist entweder unbezahlt oder bereits abgesprungen.");
      }

    })
};

Does this answer your question? Javascript addEventListener Callback logic (There must be a better dupe somewhere, but I can't find one just yet.) — InSync
– InSync, Commented Jan 20, 2024 at 12:46
Also NEVER call anything in a form submit if you ever plan to submit a form programmatically. Lastly don't use empty template literal backticks to validate empty strings. Change to if (field.value === '') { — mplungjan
– mplungjan, Commented Jan 20, 2024 at 13:37

chrslg · Accepted Answer · 2024-01-20 13:01:22Z

1. pass the function, not the result

input1.addEventListener("change", updateValue(input1)); means that each time input1 element value changes, you call the function that was returned by updateValue(input1)`. If that is a function. Which it is not.

That is just the same code as

let x=updateValue(input1);
input1.addEventListener("change", x);

So it doesn't call updateValue each times you change input1. It calls x each times you change input1. Which (probably. I haven't really read the function, I just surmise from its name, and from what people usually do) makes no sense.

What you want is to have updateValue called

input1.addEventListener("change", updateValue);

Each time you change input1, updateValue is called, with the event as an argument.

And if you need to pass an argument to updateValue, other than the event, then you must first build a function that does that

input1.addEventListener("change", function(evt){updateValue(input1);});

This nameless function takes the event as argument, but don't use it, and instead, call updateValue with input1 as argument.

In such case, if we don't use the event, we can also use a parameter-less function

input1.addEventListener("change", function(){updateValue(input1);});

And with more modern notation (=> notation), we can shorten that a bit

input1.addEventListener("change", ()=>{updateValue(input1);});

And even, because that function is a single call,

input1.addEventListener("change", ()=>updateValue(input1));

But I am not a big fan of that last version: it creates the very confusion that caused your error in the first place.

2. You don't really need to pass input1

In reality, if you give a function (without wrapping it in another function), as I first did, it will be call with the event as an argument. And that even contains input1, it is its target field.

So

input1.addEventListener('change', updateValue);

function updateValue(event){
    // do something with event.target (instead of field)
}

Would do the same.

Collectives™ on Stack Overflow

Javascript Newbie: use element in function [duplicate]

1 Answer 1

1. pass the function, not the result

2. You don't really need to pass input1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. pass the function, not the result

2. You don't really need to pass input1

1 Comment

Linked

Related