Calling a method on OnClick using TypeScript

Question

I have a TS code like this:

class MicrositeRequest {
    micrositeName: string;
    micrositeTemplate: string;

    constructor() {
        this.micrositeName = $("#micrositeNameId").val();
        this.micrositeTemplate = $("#templateId option:selected").text();
    }

  public  IsMicrositeRequestValid() {
        if (this.checkForName() && this.checkForTemplate()) {
            return true;
        }
        else {
            return false;
        }
    }

    checkForName() {
        if (this.micrositeName != null && this.micrositeName.length != 0) {
            return true;
        }
        else {
            return false;
        }
    }

    checkForTemplate() {
        if (this.micrositeTemplate != null && this.micrositeTemplate.length != 0) {
            return true;
        }
        else {
            return false;
        }
    }
}

Here's the converted JS:

/// <reference path="scripts/typings/jquery/jquery.d.ts" />
var MicrositeRequest = (function () {
    function MicrositeRequest() {
        this.micrositeName = $("#micrositeNameId").val();
        this.micrositeTemplate = $("#templateId option:selected").text();
    }
    MicrositeRequest.prototype.IsMicrositeRequestValid = function () {
        if (this.checkForName() && this.checkForTemplate()) {
            return true;
        }
        else {
            return false;
        }
    };
    MicrositeRequest.prototype.checkForName = function () {
        if (this.micrositeName != null && this.micrositeName.length != 0) {
            return true;
        }
        else {
            return false;
        }
    };
    MicrositeRequest.prototype.checkForTemplate = function () {
        if (this.micrositeTemplate != null && this.micrositeTemplate.length != 0) {
            return true;
        }
        else {
            return false;
        }
    };
    return MicrositeRequest;
})();

//# sourceMappingURL=Microsite.js.map

On Click of a button I want to call the IsMicrositeRequestValid() method.

Here's the HTML:

<div>
            <input type="submit" name="submit" value="Get" onclick="IsMicrositeRequestValid()" />
        </div>

The Console says IsMicrositeRequestValid is not defined.

Any clues why this is happening and how I can fix it?

pete · Accepted Answer · 2014-11-14 13:17:08Z

The call to IsMicrositeRequestValid in the onclick attribute requires that the function be part of the global namespace (window). Further, I'm pretty sure you'll need to instantiate MicrositeRequest object before the call to IsMicrositeRequestValid work (because it relies on this).

function validateRequest() { // declare a function in the global namespace
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();
}

<input type="submit" name="sumbit" value="Get" onclick="validateRequest()" />

is the quick & dirty way which should get it working.

You could also do this:

window.validateRequest = function () { // declare a function in the global namespace
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();
}

which I think is more readable.

Also, look into the Element.addEventListener method. It allows much more flexibility.

var submit = document.getElementById('my-submit');
submit.addEventListener('click', function () {
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();    
});

<input type="submit" id="my-submit" name="sumbit" value="Get" />

Martin Pabst · Accepted Answer · 2020-09-23 15:11:58Z

In addition to pete's answer here an object oriented solution:

Alex works with jQuery, so i feel free to use it in this answer.

1. You can't call methods of a class but only methods of objects, so you have to instantiate a object of class MicrositeRequest somewhere. Usually you do this after the DOM is fully populated, so you write:

$(() => {
   new MicrositeRequest();
});

You may place this code beneath your class definition so that it starts after the browser loaded your script.

2. Give your input element an id:

<div>
            <input id="myInputElement" type="submit" name="submit" value="Get" onclick="IsMicrositeRequestValid()" />
</div>

Register method IsMicrositeRequestValid of the MicrositeRequest-object as onClick-handler for your input-element. To achieve this add these lines to the constructor method of class MicrositeRequest:

let that = this;
$('#myInputElement').on('click', () => {
   that.IsMicrositeRequestValid();
});

You need variable that because inside the event handler this points to the input element.

Collectives™ on Stack Overflow

Calling a method on OnClick using TypeScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related