jQuery onclick with parameters gives "** is not defined"

Question

This is in my Javascript:

function doSomething(fieldActions) {
var Actions = fieldActions;

$(Actions).show("slow");
$(this).hide(); }

This is in my HTML:

<a onclick="doSomething('#date-actions');">edit</a>

The parameter needs to affect and DIV field. The ID of this field can be variable and there can be multiple on a page, so that's why I need to give the specific field it affects on. The parameter "#date-actions" is an example of what a DIV field could be called that it is calling to.

My error in firebug:

doSomething is not defined

Answer 1

Currently wherever doSomething is defined it's not a globally accessible function, for example if it's inside a document.ready handler it's only accessible inside there. You would need to expose the scope...but even then this wouldn't refer to what you wanted inside the function.

---

A better approach to solve both issues would be to use the href property of the link itself, like this:

 <a class="edit" href="#date-actions">edit</a>

Then by giving it a class, like in the above example, you can bind all those links on document.ready like this:

$(function() {
  $("a.edit").click(function(e) {
    $(this).hide();
    $(this.hash).show();
    e.preventDefault();
  });
});

If they're added dynamically just change the bind from $("a.edit").click(function(e) { to $("a.edit").live("click", function(e) {.

Answer 2

Thanks Nick, As mentioned in my direct response..if I have this for example, something with multiple parameters...

function doSomething(fieldActions1,fieldActions2,fieldActions3) {
var Actions1 = fieldActions1;
var Actions2 = fieldActions2;
var Actions3 = fieldActions3;

$(Actions1).show("slow");
$(Actions2).show("slow");
$(Actions3).show("slow");
$(this).hide(); }

What should I do then to pass all parameters to my function?