Is there any way to capture an event inside a function using an id or class of an element

I'm trying to capture an onclick event of a button using its id inside a function and then trying to console.log the value! but i think that because the event capture code is inside a function its not detecting when the event fires! is there any way around it! thank you !

window.onload = xyz;



function xyz() {

click();

 

  }

 function click() {

    var x = document.querySelector("#btn");

    x.addEventListener("click", myfunction);

    console.log(x);}



function myfunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

edited Nov 21 '18 at 15:41

asked Nov 21 '18 at 15:13

Faizal Mohaideen Kadersha

176

1

It looks like your code would work, just call click after the elements exist. Though I'm not sure what exactly is "the value" you want to log to.

– Teemu
Nov 21 '18 at 15:16

1

myfunction is not equal to myFunction - change that and it should work. Also you never call the click function to bind the event

– Pete
Nov 21 '18 at 15:18

First of all, you never call your click function. Secondly JS is case sensetive so myfunction and myFunction are not the same.

– Smollet777
Nov 21 '18 at 15:19

@Smollet777 i have edited my question check even after changing name and calling the function using window.location its not triggering

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:31

3

you still don't call the click function - you just wrpped it and called the outer function - nothing calls the click function that binds it

– Pete
Nov 21 '18 at 15:32

|
show 8 more comments

window.onload = xyz;



function xyz() {

click();

 

  }

 function click() {

    var x = document.querySelector("#btn");

    x.addEventListener("click", myfunction);

    console.log(x);}



function myfunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

edited Nov 21 '18 at 15:41

asked Nov 21 '18 at 15:13

Faizal Mohaideen Kadersha

176

1

It looks like your code would work, just call click after the elements exist. Though I'm not sure what exactly is "the value" you want to log to.

– Teemu
Nov 21 '18 at 15:16

1

myfunction is not equal to myFunction - change that and it should work. Also you never call the click function to bind the event

– Pete
Nov 21 '18 at 15:18

First of all, you never call your click function. Secondly JS is case sensetive so myfunction and myFunction are not the same.

– Smollet777
Nov 21 '18 at 15:19

@Smollet777 i have edited my question check even after changing name and calling the function using window.location its not triggering

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:31

3

you still don't call the click function - you just wrpped it and called the outer function - nothing calls the click function that binds it

– Pete
Nov 21 '18 at 15:32

|
show 8 more comments

window.onload = xyz;



function xyz() {

click();

 

  }

 function click() {

    var x = document.querySelector("#btn");

    x.addEventListener("click", myfunction);

    console.log(x);}



function myfunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

edited Nov 21 '18 at 15:41

asked Nov 21 '18 at 15:13

Faizal Mohaideen Kadersha

176

window.onload = xyz;



function xyz() {

click();

 

  }

 function click() {

    var x = document.querySelector("#btn");

    x.addEventListener("click", myfunction);

    console.log(x);}



function myfunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

window.onload = xyz;



function xyz() {

click();

 

  }

 function click() {

    var x = document.querySelector("#btn");

    x.addEventListener("click", myfunction);

    console.log(x);}



function myfunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

window.onload = xyz;



function xyz() {

click();

 

  }

 function click() {

    var x = document.querySelector("#btn");

    x.addEventListener("click", myfunction);

    console.log(x);}



function myfunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

javascript jquery html ajax

edited Nov 21 '18 at 15:41

asked Nov 21 '18 at 15:13

Faizal Mohaideen Kadersha

176

edited Nov 21 '18 at 15:41

asked Nov 21 '18 at 15:13

Faizal Mohaideen Kadersha

176

edited Nov 21 '18 at 15:41

asked Nov 21 '18 at 15:13

Faizal Mohaideen Kadersha

176

asked Nov 21 '18 at 15:13

Faizal Mohaideen Kadersha

176

asked Nov 21 '18 at 15:13

Faizal Mohaideen Kadersha

176

1

It looks like your code would work, just call click after the elements exist. Though I'm not sure what exactly is "the value" you want to log to.

– Teemu
Nov 21 '18 at 15:16

1

myfunction is not equal to myFunction - change that and it should work. Also you never call the click function to bind the event

– Pete
Nov 21 '18 at 15:18

First of all, you never call your click function. Secondly JS is case sensetive so myfunction and myFunction are not the same.

– Smollet777
Nov 21 '18 at 15:19

@Smollet777 i have edited my question check even after changing name and calling the function using window.location its not triggering

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:31

3

you still don't call the click function - you just wrpped it and called the outer function - nothing calls the click function that binds it

– Pete
Nov 21 '18 at 15:32

|
show 8 more comments

1

It looks like your code would work, just call click after the elements exist. Though I'm not sure what exactly is "the value" you want to log to.

– Teemu
Nov 21 '18 at 15:16

1

myfunction is not equal to myFunction - change that and it should work. Also you never call the click function to bind the event

– Pete
Nov 21 '18 at 15:18

First of all, you never call your click function. Secondly JS is case sensetive so myfunction and myFunction are not the same.

– Smollet777
Nov 21 '18 at 15:19

@Smollet777 i have edited my question check even after changing name and calling the function using window.location its not triggering

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:31

3

you still don't call the click function - you just wrpped it and called the outer function - nothing calls the click function that binds it

– Pete
Nov 21 '18 at 15:32

It looks like your code would work, just call click after the elements exist. Though I'm not sure what exactly is "the value" you want to log to.

– Teemu
Nov 21 '18 at 15:16

myfunction is not equal to myFunction - change that and it should work. Also you never call the click function to bind the event

– Pete
Nov 21 '18 at 15:18

First of all, you never call your click function. Secondly JS is case sensetive so myfunction and myFunction are not the same.

– Smollet777
Nov 21 '18 at 15:19

@Smollet777 i have edited my question check even after changing name and calling the function using window.location its not triggering

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:31

you still don't call the click function - you just wrpped it and called the outer function - nothing calls the click function that binds it

– Pete
Nov 21 '18 at 15:32

|
show 8 more comments

2 Answers
2

active

oldest

votes

You could just use the jQuery on like this.

$("#btn").on( "click", myFunction);



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

This would work.

Also I didn't check if it is the only problem in your example but it seems that you have a mistake in the name of the function called myfunction => myFunction

x.addEventListener("click", myFunction);

edited Nov 21 '18 at 15:33

answered Nov 21 '18 at 15:22

Anastasios Selmanis

1,99631533

that would work but is there any way to make it work by defining the addeventlistener inside a custom function? thank you for your time in answering it tho

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:36

@FaizalMohaideenKadersha an inline click handler would be ok for you? Something like <button id="btn" onclick ="myFunction()">Try it</button>

– Anastasios Selmanis
Nov 21 '18 at 15:43

@FaizalMohaideenKadersha you should remove the jquery tag if you do not want jquery answers

– Pete
Nov 21 '18 at 15:43

add a comment |

You can turn the click function into an IIFE:

(function click() {

  var x = document.querySelector("#btn");

  x.addEventListener("click", myFunction);

  console.log(x);

})()



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

Also make sure the capitalization matches when calling the functions

edited Nov 21 '18 at 15:33

Smollet777

1,36011015

answered Nov 21 '18 at 15:23

Dmitriy

612216

@dimitry is there any way around it to make it happen without turning the function to Immediately Invoked Function Expression

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:35

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415071%2fis-there-any-way-to-capture-an-event-inside-a-function-using-an-id-or-class-of-a%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You could just use the jQuery on like this.

$("#btn").on( "click", myFunction);



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

This would work.

Also I didn't check if it is the only problem in your example but it seems that you have a mistake in the name of the function called myfunction => myFunction

x.addEventListener("click", myFunction);

edited Nov 21 '18 at 15:33

answered Nov 21 '18 at 15:22

Anastasios Selmanis

1,99631533

that would work but is there any way to make it work by defining the addeventlistener inside a custom function? thank you for your time in answering it tho

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:36

@FaizalMohaideenKadersha an inline click handler would be ok for you? Something like <button id="btn" onclick ="myFunction()">Try it</button>

– Anastasios Selmanis
Nov 21 '18 at 15:43

@FaizalMohaideenKadersha you should remove the jquery tag if you do not want jquery answers

– Pete
Nov 21 '18 at 15:43

add a comment |

You could just use the jQuery on like this.

$("#btn").on( "click", myFunction);



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

This would work.

Also I didn't check if it is the only problem in your example but it seems that you have a mistake in the name of the function called myfunction => myFunction

x.addEventListener("click", myFunction);

edited Nov 21 '18 at 15:33

answered Nov 21 '18 at 15:22

Anastasios Selmanis

1,99631533

that would work but is there any way to make it work by defining the addeventlistener inside a custom function? thank you for your time in answering it tho

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:36

@FaizalMohaideenKadersha an inline click handler would be ok for you? Something like <button id="btn" onclick ="myFunction()">Try it</button>

– Anastasios Selmanis
Nov 21 '18 at 15:43

@FaizalMohaideenKadersha you should remove the jquery tag if you do not want jquery answers

– Pete
Nov 21 '18 at 15:43

add a comment |

You could just use the jQuery on like this.

$("#btn").on( "click", myFunction);



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

This would work.

Also I didn't check if it is the only problem in your example but it seems that you have a mistake in the name of the function called myfunction => myFunction

x.addEventListener("click", myFunction);

edited Nov 21 '18 at 15:33

answered Nov 21 '18 at 15:22

Anastasios Selmanis

1,99631533

You could just use the jQuery on like this.

$("#btn").on( "click", myFunction);



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

This would work.

Also I didn't check if it is the only problem in your example but it seems that you have a mistake in the name of the function called myfunction => myFunction

x.addEventListener("click", myFunction);

edited Nov 21 '18 at 15:33

answered Nov 21 '18 at 15:22

Anastasios Selmanis

1,99631533

edited Nov 21 '18 at 15:33

answered Nov 21 '18 at 15:22

Anastasios Selmanis

1,99631533

answered Nov 21 '18 at 15:22

Anastasios Selmanis

1,99631533

answered Nov 21 '18 at 15:22

Anastasios Selmanis

1,99631533

that would work but is there any way to make it work by defining the addeventlistener inside a custom function? thank you for your time in answering it tho

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:36

@FaizalMohaideenKadersha an inline click handler would be ok for you? Something like <button id="btn" onclick ="myFunction()">Try it</button>

– Anastasios Selmanis
Nov 21 '18 at 15:43

@FaizalMohaideenKadersha you should remove the jquery tag if you do not want jquery answers

– Pete
Nov 21 '18 at 15:43

add a comment |

that would work but is there any way to make it work by defining the addeventlistener inside a custom function? thank you for your time in answering it tho

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:36

@FaizalMohaideenKadersha an inline click handler would be ok for you? Something like <button id="btn" onclick ="myFunction()">Try it</button>

– Anastasios Selmanis
Nov 21 '18 at 15:43

@FaizalMohaideenKadersha you should remove the jquery tag if you do not want jquery answers

– Pete
Nov 21 '18 at 15:43

that would work but is there any way to make it work by defining the addeventlistener inside a custom function? thank you for your time in answering it tho

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:36

@FaizalMohaideenKadersha an inline click handler would be ok for you? Something like <button id="btn" onclick ="myFunction()">Try it</button>

– Anastasios Selmanis
Nov 21 '18 at 15:43

@FaizalMohaideenKadersha you should remove the jquery tag if you do not want jquery answers

– Pete
Nov 21 '18 at 15:43

add a comment |

You can turn the click function into an IIFE:

(function click() {

  var x = document.querySelector("#btn");

  x.addEventListener("click", myFunction);

  console.log(x);

})()



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

Also make sure the capitalization matches when calling the functions

edited Nov 21 '18 at 15:33

Smollet777

1,36011015

answered Nov 21 '18 at 15:23

Dmitriy

612216

@dimitry is there any way around it to make it happen without turning the function to Immediately Invoked Function Expression

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:35

add a comment |

You can turn the click function into an IIFE:

(function click() {

  var x = document.querySelector("#btn");

  x.addEventListener("click", myFunction);

  console.log(x);

})()



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

Also make sure the capitalization matches when calling the functions

edited Nov 21 '18 at 15:33

Smollet777

1,36011015

answered Nov 21 '18 at 15:23

Dmitriy

612216

@dimitry is there any way around it to make it happen without turning the function to Immediately Invoked Function Expression

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:35

add a comment |

You can turn the click function into an IIFE:

(function click() {

  var x = document.querySelector("#btn");

  x.addEventListener("click", myFunction);

  console.log(x);

})()



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

Also make sure the capitalization matches when calling the functions

edited Nov 21 '18 at 15:33

Smollet777

1,36011015

answered Nov 21 '18 at 15:23

Dmitriy

612216

You can turn the click function into an IIFE:

(function click() {

  var x = document.querySelector("#btn");

  x.addEventListener("click", myFunction);

  console.log(x);

})()



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

Also make sure the capitalization matches when calling the functions

(function click() {

  var x = document.querySelector("#btn");

  x.addEventListener("click", myFunction);

  console.log(x);

})()



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

(function click() {

  var x = document.querySelector("#btn");

  x.addEventListener("click", myFunction);

  console.log(x);

})()



function myFunction() {

  document.querySelector(".example").style.backgroundColor = "red";

  return 1;

}

<h2 class="example">A heading with class="example"</h2>



<p>Click the button to add a background color to the first element in the document with class="example".</p>



<button id="btn">Try it</button>

edited Nov 21 '18 at 15:33

Smollet777

1,36011015

answered Nov 21 '18 at 15:23

Dmitriy

612216

edited Nov 21 '18 at 15:33

Smollet777

1,36011015

edited Nov 21 '18 at 15:33

Smollet777

1,36011015

edited Nov 21 '18 at 15:33

Smollet777

1,36011015

answered Nov 21 '18 at 15:23

Dmitriy

612216

answered Nov 21 '18 at 15:23

Dmitriy

612216

answered Nov 21 '18 at 15:23

Dmitriy

612216

@dimitry is there any way around it to make it happen without turning the function to Immediately Invoked Function Expression

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:35

add a comment |

@dimitry is there any way around it to make it happen without turning the function to Immediately Invoked Function Expression

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:35

@dimitry is there any way around it to make it happen without turning the function to Immediately Invoked Function Expression

– Faizal Mohaideen Kadersha
Nov 21 '18 at 15:35

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk