Pass HTML element to JavaScript function

Question

I am passed 3 html elements as parameters to JS function. JS function is in separate file. I have problem to bind 'click' event with _confBtn object (which is parameter). My complete JS file:

 window.HAS = window.HAS || {};
HAS.MyApp = HAS.MyApp || {};
(function (_this, ,ドル undefined) {
var _sessionTimeOut = false;
var _startCountDown = false;
var _counterTime;
var _countDownTime;
var _dialogWrap;
var _confBtn;
var _counter;
_this.init = function (showDialogTime, logofCountDownTime, dialogWrap, counter, confirmationButton) {
 _counterTime = 5;
 _countDownTime = 0;
 _dialogWrap = $('#' + dialogWrap);
 _confBtn = $('#' + confirmationButton);
 _counter = $('#' + counter);
 alert(_confBtn.text());
 createSessionTimeOut();
 $(document).bind("mousemove keypress mousedown mouseup", resetTimeOut);
}
_confBtn.on('click', function () {
 window.clearInterval(_startCountDown);
 _dialogWrap.css('visibility', 'hidden');
 createSessionTimeOut();
 $(document).bind("mousemove keypress mousedown mouseup", resetTimeOut);
});
function createSessionTimeOut() {
 _sessionTimeOut = window.setTimeout(function () {
 _dialogWrap.removeAttr("style");
 _counter.text(_counterTime);
 $(document).unbind("mousemove keypress mousedown mouseup");
 startCountDown();
 }, 2000);
}
function startCountDown() {
 _startCountDown = window.setInterval(function () {
 if (_counterTime >= 0) {
 _counter.text(_counterTime--);
 }
 _countDownTime++;
 if (_countDownTime >= 4) {
 logOutUser();
 return;
 }
 }, 1000);
}
function resetTimeOut() {
 window.clearTimeout(_sessionTimeOut);
 _sessionTimeOut = false;
 createSessionTimeOut();
}
function logOutUser() {
 $.ajax({
 url: '/MyApp/Account/LogOut',
 type: 'GET',
 success: function () {
 document.location.href = '/MyApp/Account/Login';
 }
 })
}
}(window.HAS.MyApp.SessionTimeOut = window.HAS.MyApp.SessionTimeOut || {}, jQuery));

I call in separate page like in following:

SessionTimeOut.init('5', '5', 'dialog-wrap', 'confirm-button', 'counter');

I have issue with _confBtn when I try to call click event. Browser show that is undefined.

Please help.

• nbrooks: Is it possible? Yes. You can pass HTML elements, jQuery objects, both, or neither to a JavaScript method. You can't, however, include jQuery method calls in your function definition--remember $() is a function call.
• Peter Herdenborg: Might be worth mentioning that you're not passing HTML to the function, but jQuery selections, representing elements, in turn representing some HTML markup.
• kat1330: Eureka moment happened! I use $('#container').delegate('a', 'click', function() { alert("That tickles!") }); Instead of click and it works. According to alfajango.com/blog/… Tomorrow I will more detail review how delegate works.
• kat1330: Generally I bind click to my button like this: $(document).delegate('#confirm-button', 'click', function () { })

Answer 1

It would probably better to do something more dynamic like this:

function SomeFunction (element1,element2) {
 var e1 = $("#"+element1),
 e2 = $("#"+element2);
 // Do something with variables e1 and e2
}

and you would call like this:

//html:
<div id="one"><div>
<div id="two"><div>
//javasctript:
SomeFunction('one','two');

• kat1330: Is it possible to call .click event under that html element which I passed as parameter?
• Stu: yep, you can use variable e1 inside the function just as you would use $('#one') anywhere else in your code, so you can bind to it, alter it etc.
• kat1330: But I used like e.g. e1.click(function() {// Do something}) But it doesn't work. e1 is undefined. You can see my message on bottom for details.
• kat1330: please review my last answer on bottom. I am very bored :(

Answer 2

No, you are mixing a function declaration with a function call somehow. You can't provide function arguments when defining a function. This however will work fine:

function someFunction($element1, $element2) {
 //Do something with the elements
}
someFunction($("#element1"), $("#element2"));

Note that $element1 and $element2 are just variable names, and the leading $ doesn't have anything to do with jQuery. It is just a common convention to identify variables referencing jQuery selections.

Answer 3

You can of course do it, just by using the normal jQuery way of including multiple selectors. Your code is slightly incorrect because you are actually only defining the function without calling it, and you are not supposed to pass arguments/variables into the function when defining it.

Unless you have the intention to distinguish between two groups of elements, I would refrain from declaring elements individually as you have used in your question, because sometimes you will never know the length of the selected items.

function someFunction($ele) {
 // jQuery objects will be accessible as $ele
}
// Call the function
someFunction($('#selector1, #selector2'));

However, if the former is the case, you can always do so:

function someFunction($ele1, $ele2) {
 // jQuery objects will be accessible as $ele1 and $ele2 respectively
 // Example: $ele1.hide();
 // $ele2.show();
}
// Call the function
someFunction($('#selector1'), $('#selector2'));

For example, you can refer to this proof-of-concept JSfiddle: http://jsfiddle.net/teddyrised/ozrfLwwt/

function someFunction($ele) {
 // jQuery objects will be accessible as $ele
 $ele.css({
 'background-color': '#c8d9ff'
 });
}
// Call the function
someFunction($('#selector1, #selector2'));

• Peter Herdenborg: Why assume it is suitable to put both elements in the same jQuery collection? There might be good reasons to pass two selections as separate arguments, if they are to be treated differently inside the function.
• Terry: @PeterHerdenborg And why assume it is not the case? OP did not specify the need to separate or make a distinction between either.
• Peter Herdenborg: But by that line of reasoning you can assume anything not explicitly defined in the question, making it harder to distinguish the essence of the answer from various things you've chosen to spice up the answer with. But I agree it's worth mentioning the possibility to combine into a single JQ selection, since OP might not realize that.
• Terry: @PeterHerdenborg You should really, really hold your horses on stuff, man. We are all here to help, and I really don't understand why you're being hypercritical about how we (differentially) interpret OP's question. To each his own.
• Peter Herdenborg: Yeah, sure, we're all here to help. One way to do that is to comment on answers, both so they can be improved and to add information that might be helpful for people reading the answer. I don't see anything extreme or aggressive about my two comments above. I also note you happily updated your answer after my first comment. No need to start an argument over this.

Answer 4

If you want to pass some elements to function you can use jQuery constructor to standardize arguments

function SomeFunction (element1,element2) {
 element1 = $(element1);
 element2 = $(element2);
 // and you have 2 jQuery objects...
}
// and now you can pass selector as well as jQuery object.
SomeFunction($('div.a'),'#b');

• trejder: Please, add 2-3 lines of explanation, not just pure code, because your answer pops up in Low Quality queue and without text explanation, it might be closed some day. Thanks.

Answer 5

You can pass paramters as much as you want this way. I use jQuery in this code and created a simple function.

var item=$("#item-id");
var item1=$("#item1-id");
makeReadOnly(item,item1); 
function makeReadOnly(){
 for(var i=0;i<arguments.length;i++){
 $(arguments[i]).attr("readonly", true);
 }
}