How to pass a JavaScript statement to a function?

Question

I am trying to pass a complete JavaScript statement to a function to prevent typing the same code again. I am using a variable but this code does not seem to work. The HTML input is given below.

var e2;
  e2 = document.getElementById("num2");
  e2.addEventListener('blur', checko(e2));

function checko(k){
   alert("Hey you have entered - "+k.value)
  }

<input type="text" class="form-control" id="num2" placeholder="0">

This is just a small code of the web page I am building and to validate other inputs I would like to KEEP use a function.

Better duplicate target: http://stackoverflow.com/questions/12024483/how-to-pass-parameter-to-function-using-in-addeventlistener — Sebastian Simon, Jun 20 '16 at 03:47

zer00ne · Accepted Answer · 2016-06-20T03:46:58.477

Change event to change and use this.value as parameter see Snippet. The behavior of change is that it has 3 distinct characteristics:

The event.target needs to be a form input (that includes textarea as well). ✔
It needs user input. ✔
It fires when the event.target has lost focus (a.k.a. blur). ✔

SNIPPET

var e2 = document.getElementById("num2")

e2.addEventListener('change', function(e) {
  checko(this.value);
}, false);

function checko(k) {
  alert("Hey you have entered - " + k);
}

<input type="text" class="form-control" id="num2" placeholder="0">

score 1 · Answer 2 · answered Jun 20 '16 at 03:35

I am trying to pass a complete JavaScript statement to a function

It seems you are trying to pass the value of e2 which is the id of the DOM element

Also checko(e2) will execute the function as soon as event is attached to the DOM.

Instead you need to delegate the event.

Beside you can also use Event object to find out the target on which event is executed.

This snippet may be useful

var e2;
e2 = document.getElementById("num2");
e2.addEventListener('blur', checko);

function checko(event){
   alert("Hey you have entered - "+event.target.value)
}

JSFIDDLE

score 0 · Answer 3 · answered Jun 20 '16 at 03:39

You can' pass arguments directly when using addEventListener you can use function() {yourfuncttion(args);}

var e2;
e2 = document.getElementById("num2");
e2.addEventListener('blur', function () { 
 checko(e2) 
});

function checko(k) {
alert("Hey you have entered - " + k.value)
}

score 0 · Answer 4 · answered Jun 20 '16 at 03:39

0

function checko(){
 var e2 = document.getElementById("num2").value;
 alert("Hey you have entered - "+e2);
}

<input type="text" class="form-control" id="num2" placeholder="0" onblur="checko()">

You can also use Onblur Event Listener on direct field.

answered Jun 20 '16 at 03:39

Hamza Zafeer

2,360
13
30
42

score -1 · Answer 5 · answered Jun 20 '16 at 03:39

<!DOCTYPE html>
<html>
<body>


Enter your lastname: <input type="text" id="firstname" >
Enter your fnmae : <input type="text" id="lastname">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>

var firstname = document.getElementById('firstname');
firstname.addEventListener('blur', function() {
myFunction(firstname)   
});

var lastname = document.getElementById('lastname');
lastname.addEventListener('blur', function() {
myFunction(lastname)   
});

function myFunction(k){
   alert("Hey you have entered - "+k.value)
  }

</script>

</body>
</html>

How to pass a JavaScript statement to a function?

5 Answers5

SNIPPET