Develop Reference

Javascript automaticly runs onclick function

As I was making a gallery for a webpage I ran into a problem with js automatically running the (next_image) function, after some searching around I found out it was due to the () after the statement.
however, I can not for the life of me figure out how else to get the clicked_id to the next_image function.
So my question is: how can I make it so that the function runs only after clicking the button while still sending the clicked_id?
function opencase(clicked_id) {
document.getElementById("right_arrow").addEventListener("click", next_image(clicked_id));
}
function next_image(photoid){
console.log(photoid);
photoid++;
document.getElementById("disp").setAttribute("src", "images/image"+photoid+".jpg");
console.log(photoid);
}
Any help will be greatly appreciated :D

Instead of directly calling the function , call it from the addEventListener callback function
function opencase(clicked_id) {
document.getElementById("right_arrow").addEventListener("click", function() {
next_image(clicked_id)
});
}
function next_image(photoid) {
console.log(photoid);
photoid++;
document.getElementById("disp").setAttribute("src", "images/image" + photoid + ".jpg");
console.log(photoid);
}

Calling custom functions on click (javascript / jquery)

I am a beginner and having a problem with calling functions that I create on JavaScript or jQuery.
if i use this, it works:
$("#objectId").click(function(){
alert("Clicked on objectId")
}
however if I pre-define a function and call it onclick it doesn't work
function alertOnClick(objectToClick) {
alert("Clicked on " + objectToClick)
}
$("#objectId").click(alertOnClick("objectId"))
in this case, it gives the alert when the page is loaded and it does not alert on click.
What am I doing wrong syntax-wise and why?
Thank you very much

To achieve this, you need to return a function from alertOnClick as shown:
function alertOnClick(objectToClick) {
return function() {
alert("Clicked on " + objectToClick)
}
}
Which will allow you to do the following:
$("#objectId").click(alertOnClick("objectId"))
Here's a working code sample to see it in action:
function alertOnClick(objectToClick) {
return function() {
alert("Clicked on " + objectToClick)
}
}
$("#objectId").click(alertOnClick("objectId"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
<button id="objectId">Object Id</button>

Because you are calling the function alertOnClick instead of passing it as reference
You should be doing something like this:
$("#objectId").click(alertOnClick)
function alertOnClick(ev) {
alert("Clicked on " + ev.target.id);
}
When you do $("#objectId").click(alertOnClick("objectId")) you are calling the alertOnClick method with objectId as parameter before the click event happens. What you should do is pass the reference of the method so it is called when the click event happens.

Grab URL parameter onclick of url.. Jquery, Javascript

I am having some trouble trying to store the url parameters of some dynamic links that I created with an ajax post response. The ajax post is working correctly and the name and subgenre vars are being properly filled from the ajax response. Now what I would like to happen is that a user clicks on one of the generated urls, the parameters inside of the urls, i.e. subgenre="blah", are going to be sent to a database and stored. The problem I am having is that a standard event click function will not work inside or outside of the document ready function.
$(document).ready(function() {
$.each(data, function() {
$('#artist-suggestions').append('<li>' + this.name + this.new + '</li>');
});
});
I then created an onclick function, as below, but I can not use the "this" query because it is outside of the document scope. I had to put the onclick function outside of the document ready function or else it would not work.
function artistGen(){
alert('dfdsf');
};
What am I missing here or what am I doing wrong?

You can pass these in the onclick function when you make each element.
$(document).ready(function() {
$.each(data, function() {
artist = this.name;
$('#artist-suggestions').append('<li>' + this.name + this.new + '</li>');
});
})
;
function artistGen(Blah1, Blah2){
saveData(Blah1, Blah2);
alert('dfdsf');
};

In jQuery for dynamic elements you can use the click event in this way
$('#artist-suggestions li').on('click', 'a', function() {
// do something
});
or you can continue with the way you did, by using a function but just add a parameter to that function
like
function artistGen(Artist){
// do something
};

You need to remove the artistGen() function from the scope of the .load()
$(window).load(function(){
$('#artist-suggestions').append('<li>jim new</li>');
});
function artistGen(){
alert('dfdsf');
}
JSFIDDLE DEMO

That's just how it is a function called in those event attributes have to be defined globally(or defined right there) not in any wrapper function. A better solution would be to attach event handlers.
$(document).ready(function() {
function artistGen(){
alert(this.href);
};
$.each(data, function() {
var $li = $('<li>' + this.name + this.new + '</li>');
$li.find('a').on('click', artistGen);
$('#artist-suggestions').append($li)
});
});

.each() bind hover events and pass a variable to handler functions

I'm trying to bind a hover event to some elements, walking through them with $.each, with the peculiarity that I want to pass a css classname as a parameter of the hover's handler functions, but it seems that the scope is not the one I'm expecting. I've tried to
$(document).ready(function () {
var $madewithLabels = $("#made-with .label");
// Binding
$madewithLabels.each(function (index) {
// get bootstrap css classname for the current element in the loop
var bsClass = getHoverClass($(this));
console.info("css class is: " + bsClass + " - " + typeof(bsClass));
$(this).hover(
function (bsClass) {
console.info(bsClass);
$(this).addClass(bsClass);
},
function (bsClass) {
console.info(bsClass);
$(this).removeClass(bsClass);
}
);
});
});
1st console.info: getHover() gets the right css class name (string) when the events are bound (on document ready)
2nd/3rd console.info: when hover's handler functions are executed bsClass is an object (I guess it's a jQuery one)
I've solved it this way:
$(document).ready(function () {
var $madewithLabels = $("#made-with .label");
// Binding
$madewithLabels.each(function (index) {
$(this).hover(
function () {
$(this).addClass(getHoverClass($(this)));
},
function () {
$(this).removeClass(getHoverClass($(this)));
}
);
});
});
But my questions are...
Is using $(this) the right solution?
Why when I pass a string variable to the handler functions I get an object when the function is called? is it because some type casting? is it because closure scope?
Thanks to the jQuery gurus answering!

What you're getting in the hover callback is an Event object, as mentioned by the docs:
handlerIn
Type: Function( Event eventObject )
A function to execute when the mouse pointer enters the element.
So in your first example change:
function (bsClass) {
To this:
function () {
So you keep using the original bsClass that you calculated before.

Have the element who call my js function

I know my question have answer in the past but I don't have the vocabulary to find this.
I call a JavaScript function like this:
Voir +
This function change the state of the element .stats-table but I want to know which button have been clicked to call this function?
Better : can I have a jQuery object of this button?

Try to pass the this reference to know which button was clicked,
HTML:
Voir +
JS:
function showTable(selec,elem){
var currentElem = $(elem); //Clicked element
}

If you don't want to change the signature of the function and the way you invoke it (as others have suggested), you can use the global window.event to identify the clicked element:
function showTable(selector)
{
var clickedElement = window.event.target;
//...
}
See MDN.

When you use jQuery, you might consider refactor your code like this:
$(document).ready(function(){
$('.show-table-link').on('click', function(){
var $usedButton = $(this)
showTable('.stats-table')
}
})
Voir +
It's good practice to attach the on click handler instead of writing it inline. Further reading document.ready and jQuery event basics.

You can pass any value or id and your can identify the function
<script type="text/javascript">
function showTable(clss_name,fun_id)
{
if(fun_id=='A1')
{
alert("First function Executed");
}
if(fun_id=='A2')
{
alert("Second Function is executed");
}
}
</script>
......
......
......
Voir +
Voir2 +

If your function is like this:
function showTable(selec) {
// some code
}
You can get the clicked element like this, using this:
function showTable(selec) {
// some code
var clickedElem = this;
}