Syntax for defining and calling custom javascript function

Question

How do I call a custom defined function from within a jQuery click event?

I define a clearOrder function that executes some actions. Then, when I click on a DOM element, I want to call that function, and then do some more actions.

The actions are simply applying and removing classes. As you can see I want to clear the specified existing classes from elements as a sort of reset before adding specific classes to the DOM elements.

html

<div id="neti" class="tile"> contents </div>
<div id="sife" class="tile"> contents </div>

javascript

(function() {
  clearOrder(function() {
    return $('.tile').removeClass("order-1 order-2 order-3 order-4 order-5 order-6 order-7 order-8 order-9 order-10 order-11 order-12 order-13 order-14 order-15 order-16");
  });

  jQuery(function() {
    $('#neti').click(function() {
      clearOrder.call;
      $('this').addClass("active");
      $('#neti').addClass("order-1");
      $('#sife').addClass("order-2");

    });
  });

}).call(this);

The script behavior should be that when I click on an element, it should remove all of the specified classes, then apply certain classes.

edit: changed to the following, but still not functioning.

(function() {
  clearOrder(function() {
    return $('.tile').removeClass("order-1 order-2 order-3 order-4 order-5 order-6 order-7 order-8 order-9 order-10 order-11 order-12 order-13 order-14 order-15 order-16");
  });

  jQuery(function() {
    $('#neti').click(function() {
      clearOrder();
      $('this').addClass("active");
      $('#neti').addClass("order-1");
      $('#sife').addClass("order-2");

just add () at the end of the function name to invoke it.. like clearOrder();... there is no need to use .call — Arun P Johny
– Arun P Johny, Commented May 30, 2014 at 4:49
I tried your suggestion. It does not seem to function properly still. — ahnbizcad
– ahnbizcad, Commented May 30, 2014 at 4:53
no, it loads, but just doesn't behave properly: there is no visible adding or removing of any classes in the inspector. — ahnbizcad
– ahnbizcad, Commented May 30, 2014 at 4:59
Currently you're not defining clearOrder. Can you display where it's defined? (I'm thinking maybe it's scoped so your anonymous function can't get to it, which would cause it to error out). — Adam Merrifield
– Adam Merrifield, Commented May 30, 2014 at 5:00

Arun P Johny · Accepted Answer · 2014-05-30 05:00:23Z

1

There are multiple problems

(function () {
    //function declaration syntax was wrong
    function clearOrder() {
        return $('.tile').removeClass("order-1 order-2 order-3 order-4 order-5 order-6 order-7 order-8 order-9 order-10 order-11 order-12 order-13 order-14 order-15 order-16");
    };

    jQuery(function ($) {
        $('#neti').click(function () {
            //add () to the end of the function reference to invoke it
            clearOrder();
            // this is not a string literal, it has to be used as a keyword(without enclosing '') to refer the current clicked element
            $(this).addClass("active");
            $('#neti').addClass("order-1");
            $('#sife').addClass("order-2");

        });
    });

}).call(this);

Demo: Fiddle

answered May 30, 2014 at 5:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ahnbizcad Over a year ago

where/why does the $ in jQuery(function ($) { come from?

Arun P Johny Over a year ago

jQuery passes an instance of self to the dom ready handler method, so that we can refer to the jQuery using any variable name that we like...

ahnbizcad Over a year ago

thank you so much!!! Using this tool, I was able to figure out the coffee as well. haml-html-coffeecup-javascript-coffeescript-converter.smullinde…

Collectives™ on Stack Overflow

Syntax for defining and calling custom javascript function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related