0

What I'm trying to do is very simple, I want to pass string values to a JS function so that it can show them in the usual alert popup. Here's the HTML:

<div class="clickit" onclick="myfun('dog','cat')"> Hello </div>

and here's the JS:

('.clickit').click(function myfun(){
    var i=0;
    for(i=0;i<arguments.length;i++){
        alert(arguments[i]);
    }
});

Unfortunately it's not working properly, it prints out: [object Object].

Also, it's looping only once even if there are 2 arguments. I followed what is described in here: w3schools, yet it isn't working.

Any help will be appreciated.

Febio Mosca
  • 127
  • 10
  • 1
    I do not think this question is a duplicate and I do not think it should have been closed. – Jack Guy Nov 10 '15 at 17:57
  • 1
    @J4G: It's clearly not a duplicate, at least not of the question that it was marked as a duplicate of, so I reopened it. – Guffa Nov 10 '15 at 17:58
  • @Guffa This has been closed and reopened? There appears to be no history being shown? – James Thorpe Nov 10 '15 at 17:59
  • `arguments[0]` is a _jQuery.Event_ instance when invoked through the `.click` attachment (so `.toString`ing it gives `"[object Object]"`), the _onclick_ attribute gives a _ReferenceError_ when invoked – Paul S. Nov 10 '15 at 18:00
  • 2
    You are mixing two things here. Why are you using an inline event handler **and** use jQuery to bind another event handler? I recommend to spend some more time reading http://learn.jquery.com/events/ and http://www.quirksmode.org/js/introevents.html first. – Felix Kling Nov 10 '15 at 18:03
  • @JamesThorpe was going to post a JS Fiddle before i reopened it. Guffa's is better anyway – Jack Guy Nov 10 '15 at 18:03

1 Answers1

9

There is no function with a public name myfun. The function in the event handler is a named function expression, so the name is only available inside that function. The code in the click attribute will crash and you can find an error message for that in the error log.

When the function is called as an event handler there is only one argument; the event object.

To call the function with parameters from the event you need a named function:

function myfun(){
  var i=0;
  for(i=0;i<arguments.length;i++){
    alert(arguments[i]);
  }
}

Then you can call it from the click attribute:

<div class="clickit" onclick="myfun('dog','cat')"> Hello </div>

or you can bind an event handler from code that calls the function:

$('.clickit').click(function(){
  myfun('dog','cat');
});

Demo:

function myfun(){
  var i=0;
  for(i=0;i<arguments.length;i++){
    alert(arguments[i]);
  }
}

$('.clickit').click(function(){
  myfun('dog','cat');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div onclick="myfun('dog','cat')"> Hello </div>

<div class="clickit"> Hello </div>
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 1
    @FelixKling: Yes, of course. Thanks, I corrected that. – Guffa Nov 10 '15 at 18:06
  • Might want to link this too: https://api.jquery.com/category/events/event-object/ . – Felix Kling Nov 10 '15 at 18:06
  • If I was inserting this code in a – Febio Mosca Nov 10 '15 at 18:33
  • @FebioMosca: I just forgot to remove `);` after the function definition. I edited the code above and added a demo that shows both ways to use the function. – Guffa Nov 10 '15 at 23:15
  • I need to pass the needed arguments from the HTML code, not from JS. Furthermore if I run your code snippet here on StackOverflow it doesn't work at all, if I run it in JSFiddle only the second "Hello" works and that is because the values are passed directly from JS, which is NOT what I need. I need to resolve the `.click/onclick=""` conflict while still passing values from HTML and associating the function myfun() with the div's class. If that's even possible... – Febio Mosca Nov 11 '15 at 13:35
  • @FebioMosca: Are you trying it in Chrome? It doesn't allow alerts in the snippets. If you try it in JSFiddle you need to make sure that the code is not in a wrapper so that the function is global, otherwise you can't reach it from the code in the onclick attribute. Here is a fiddle that works: http://jsfiddle.net/ugo0m71v/ – Guffa Nov 11 '15 at 13:42
  • Thanks, now I got it :) – Febio Mosca Nov 11 '15 at 15:25