Kevin Powell - Community•3mo ago

eventListener on click

I'm dealing with a "simple issue". Basically, i want to put my code inside a function instead of passing directly in the button, but i'm having a issue where i don't know exactly how i'm supposed to do it, so. Here's the html, very simple:

<html !doctype>
  <head></head>
  <body>
<input id="text-input"></input>
<button id="check-btn">Click</button>
<p id="result"> test </p>

</body>
<script src="script.js"/>

<html !doctype>
  <head></head>
  <body>
<input id="text-input"></input>
<button id="check-btn">Click</button>
<p id="result"> test </p>

</body>
<script src="script.js"/>

the js:

const checkButton = document.getElementById("check-btn");
const input = document.getElementById("text-input");
const result = document.getElementById("result")


checkButton.addEventListener("click", ()=> {
  if(input.value == ''){
    alert ("Please input a value");
  } //it works like this
})

//but once i put like this, i just can't make it work 
const checkIsEmpty = () => {
  if(input.value == ''){
    alert ("Please input a value");
  }
}

checkButton.addEventListener("click", checkIsEmpty())

const checkButton = document.getElementById("check-btn");
const input = document.getElementById("text-input");
const result = document.getElementById("result")


checkButton.addEventListener("click", ()=> {
  if(input.value == ''){
    alert ("Please input a value");
  } //it works like this
})

//but once i put like this, i just can't make it work 
const checkIsEmpty = () => {
  if(input.value == ''){
    alert ("Please input a value");
  }
}

checkButton.addEventListener("click", checkIsEmpty())

34 Replies

loss•3mo ago

I do believe i'm overthinking about something more simple than it seems to solve

ἔρως•3mo ago

you're not only overthinkinging but you're misuing it you can delete your entire javascript and just add the required attribute to the fields BUT!!!!! you have to put everything inside a form, as you should have done from the beginning and the button should have the type explicitly set to submit

loss•3mo ago

oooh

Jochem•3mo ago

Definitely what epic said, but to answer the actual question, when you're passing in a function like to an event listener, you need to omit the calling brackets where you pass the function reference. So this

checkButton.addEventListener("click", checkIsEmpty)

checkButton.addEventListener("click", checkIsEmpty)

loss•3mo ago

i tried without but still wasn't working so this made me have a little mentalbreakdown for a few seconds if was it wrong or not since the logic is right and is just to show a simple alert

ἔρως•3mo ago

you have 2 different clicks

loss•3mo ago

it was just an example of the right version, but once i do like this doesn't work idk can be like bcs of the order in the script?

Jochem•3mo ago

By adding the (), you're telling Javascript to run the function and pass the result to the listener. The event listener should do the calling, so you just pass it the reference to the function to run

loss•3mo ago

like the function going after or ?

ἔρως•3mo ago

this

Jochem•3mo ago

Make a codepen or something then, I can't run code in my head

loss•3mo ago

ok wait a sec

ἔρως•3mo ago

what jochem said is supposed to work

Jochem•3mo ago

I'm on mobile atm though so I can't look too much further. I'll look when I can if epic hasn't solved it already 🙂

ἔρως•3mo ago

you already solved it checkButton.addEventListener("click", checkIsEmpty) <-- this is the solution

Gaming

Programming

eventListener on click