Develop Reference

How can we pass an element to event handler in javascript

I have created an <input> HTML element using Javascript. Now I want to add an onblur event handler to this element dynamically. However I do not understand how I can pass the created element as an argument to the function. Here's my code:
element = document.createElement("input");
element.onblur = hello_function;
In the above code you can see that the element is created. Now I want to pass that element to hello_function. How can I do that?
function hello_function(element) {
alert(element);
}

To achieve this you can wrap the hello_function call in an anonymous function wrapper and provide the this argument:
element = document.createElement("input");
element.addEventListener('blur', function() {
hello_function(this);
});
document.body.appendChild(element);
function hello_function(element) {
console.log(element);
}
Also note the preferred use of addEventListener over onblur.

try like this. passing the another variable into a function,
var something="hello";
var element = document.createElement("input");
element.addEventListener('blur' , function ()
{
hello_function(something);
})
document.body.appendChild(element)
function hello_function (element){
alert(element);
}

i suggest to use addEventListener, also i think you need to append the created element to the document, something like this:
var elem = document.createElement("input");
if (elem) {
elem.addEventListener('blur', hello_function, false);
}
document.body.append(elem);
function hello_function(element) {
alert(element);
}

jQquery Get dom modified attribute value

Let's say I modify an attribute value on click with a function like:
$('#dd ul.dropdown li a').click(function(e) {
var txt = $(e.target).html();
var langs = $(e.target).text();
$('#dd .currentlangs').html(txt);
langs = langs.trim().toLowerCase().replace(/\s+/g, "-");
$('.currentlangs').attr('data-lang', langs);
});
And then I want the current attribute value in a keyup function like:
var $input = $('#querysearch');
var dict = $('.currentlangs').attr('data-lang');
$input.on('keyup', function () {
alert(dict);
});
Needed value is "dict" variable but doing that I keep getting the initial value when DOM has been loaded. How can I get the current attribute when the keyup function is fired?
Thanks a lot

You're getting the value of the attribute as of when this line
var dict = $('.currentlangs').attr('data-lang');
runs. That's before the use clicks anything, so naturally you get the value as defined in the HTML. Move it into the keyup handler:
var $input = $('#querysearch');
$input.on('keyup', function () {
var dict = $('.currentlangs').attr('data-lang');
alert(dict);
});
...so that you get the value when the keyup event occurs.

select onchange event with parameter

I create n select in a cycle:
selCom = document.createElement("SELECT");
selCom.setAttribute("id", ("commessa"+n));
I would like to assign a function to each change: (for disable other select with same index)
selCom.setAttribute("onchange", "OnSelectionChange(this,n)");
with OnSelectionChange(this) works, OnSelectionChange(this,n) not work
function OnSelectionChange(select,indexDisable) {
var selectedOption = select.options[select.selectedIndex];
if ((selectedOption.value)=="Work"){
document.getElementById("Attivita"+indexDisable).disabled=true;
}else{
document.getElementById("Attivita"+indexDisable).disabled=false;
}
}
What is the correct form to use to also pass the parameter?

You can add event listener instead of setting the html attr like that.
function OnSelectionChange(indexDisable) {
var select = this;
var selectedOption = select.options[select.selectedIndex];
if ((selectedOption.value)=="Work"){
document.getElementById("Attivita"+indexDisable).disabled=true;
}else{
document.getElementById("Attivita"+indexDisable).disabled=false;
}
}
selCom.addEventListener('change', function(n){
OnSelectionChange(n);
}, false);

Other way is to use data-* attributes
<div data-id="1" onclick="dataTest()">TEST!</div>
Then in the JS function you could access id in the following way
function dataTest() {
alert(event.target.dataset.id);
}
here is more information about data-* attributes more info
And, here is the example

onchange event is fired on button click and not on dynamically created select element

I use this on dynamically created select but the function is not being called
select.onchange = function(select) {getdetails();};
I use this way, and the function is being called from a static button's click (I also try not appending the select to its DIV container)
select.addEventListener('change', getdetails());
Please help thanks.

Here is working code doing what you described: Live demo here (click).
var select = document.createElement('select');
var option = document.createElement('option');
option.textContent = 'Option 1';
var option2 = document.createElement('option');
option2.textContent = 'Option 2';
select.appendChild(option);
select.appendChild(option2);
select.addEventListener('change', getDetails);
document.body.appendChild(select);
function getDetails(e) {
console.log('Running!');
}
Update according to your comments - passing parameters to event listener:
select.addEventListener('change', function() {
getDetails(some, params, here);
});
You can't call the function directly and pass in parameter like you were trying to do here select.addEventListener('change', getdetails());. Consider this example:
function getdetails() {
return 'a';
}
select.addEventListener('change', getdetails());
in the above code, the returned value of getdetails() is passed as the callback, so this is the same result: select.addEventListener('change', 'a'); See why your function wasn't called?
Also, this method is outdated:
select.onchange = function(event) {
console.log(event);
};
Use addEventListener instead. If you do use it, note that it accepts the "event" object. You can't just pass in whatever you want. If you needed to pass something in, then call another function there and pass in what you need, like this:
select.onchange = function(event) {
getdetails(pass, the, params, you, need)
};
Update to be sure I'm clear:
Don't call the function your trying to pass as a callback!!!!
You're doing this (wrong);
elem.addEventListener('change', myFunc());
You need to do this (right):
elem.addEventListener('change', myFunc);
Now, for dealing with passing parameters to myFunc you can do this:
elem.addEventListener('change', function(e) {
myFunc(some, parameters, here);
});
OR:
elem.addEventListener('change', someFunc);
function someFunc(e) {
myFunc(some, parameters, here);
}

how to call onclick function on dynamically created button in javascript

var del = document.createElement('input');
del.type = 'button';
del.name = 'delll';
del.value = 'del';
del.onClick = 'alert("hi javascript")';
Here I have dynamically created a input type BUTTON and now I want to call function on button click event. I am using onClick(); function for this. In the above code all is working fine but del.onclick is not working as I want (for generating alert for demo)
I am not using any jquery code in this program so please don't use any jquery code.

set the onclick (all lower case) to an anonymous function
del.onclick = function(){ alert('hi javascript');};
note the function is not in quotes like other attributes

del.onclick = function () {
alert("hi jaavscript");
};
Use small "C" in onClick and pass a function for it.
Demo here

Try like this
var del = document.createElement('input');
del.setAttribute('type', 'button');
del.setAttribute('name', 'delll');
del.setAttribute('value', 'del');
del.setAttribute('onClick', 'alert("hi jaavscript")');

So to answer the question in details:
del.onclick = '' does not "execute" something within quotes.
If you want to execute/call a function, you would want to pass the function as a parameter.
i.e
del.onclick = function() { alert('hi there!')}