67 replies

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())

eventListener on click

<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())

eventListener on click

Similar Threads

eventListener on click

Similar Threads

Similar Threads

Similar Threads