www.webdeveloper.com
Results 1 to 3 of 3

Thread: How do I call Javascript function in a class from HTML onclick event?

  1. #1
    Join Date
    Jun 2014
    Posts
    1

    How do I call Javascript function in a class from HTML onclick event?

    function Calc() {
    alert('Hi class');
    var Sum = function() { alert('Hi function'); };
    };
    //<button onclick="new Calc().Sum"> ClickMe </button>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436

    Lightbulb

    I'm not exactly sure what you are trying to do here, so this is just a SWAG...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    
    <button onclick="Calc()"> ClickMe </button> 
    
    <script type="text/javascript">
    function Calc() {
      alert('Hi class');
      var Sum = function() { alert('Hi function'); };
      Sum();
    };
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    He wants to combine object oriented JavaScript with event handling. Three basic ways come to mind.

    Outside code binds the event handlers

    HTML Code:
    <form ...>
        ...
    
        <button type="button" id="calculateButton">Click Me</button>
    </form>
    Code:
    function Calc() {
    }
    Calc.prototype = {
        constructor: Calc,
    
        sum: function(event) {
            event.preventDefault();
            var form = event.target.form;
            // do some calculation
        }
    };
    
    var calculator = new Calc();
    
    document.getElementById("calculateButton").addEventListener("click", function(event) {
        calculator.sum(event);
    }, false);
    The class binds event handlers

    HTML Code:
    <form id="calculator">
        ...
    
        <button type="button" class="calculateButton">Click Me</button>
    </form>
    
    <script type="text/javascript">
        function Calc(form) {
            this.form = typeof form === "string"
                ? document.getElementById(form)
                : form;
            
            this.sum = this.sum.bind(this);
            this.form.querySelector("button.calculateButton").addEventListener("click", this.sum, false);
        }
        Calc.prototype = {
            form: null,
    
            constructor: Calc,
    
            sum: function(event) {
                event.preventDefault();
    
                // use this.form to do some calculation...
            }
        };
    
        var calculator = new Calc("calculator");
    </script>
    Use an event delegation library

    I created Oxydizr as an easy way to bridge event delegation and object oriented code.

    HTML Code:
    <form id="calculator">
        ...
    
        <button type="button" data-action="calculator.sum">Click Me</button>
    </form>
    
    <script type="text/javascript" src="path/to/Oxydizr.js"></script>
    <script type="text/javascript" src="path/to/Oxydizr/FrontController.js"></script>
    <script type="text/javascript">
    
        // Your JavaScript "class"
        function Calc(form) {
            this.form = typeof form === "string"
                ? document.getElementById(form)
                : form;
    
            this.controllerId = this.form.id;
        }
        Calc.prototype = {
            form: null,
    
            constructor: Calc,
    
            onControllerRegistered: function(frontController, controllerId) {
                // listen to additional events, but the front controller gives you
                // click and submit event handlers for free.
            },
    
            onControllerUnregistered: function(frontController) {
    
            },
    
            // An "action handler" that handles a "click" event
            sum: function click(event, element, params) {
                event.preventDefault();
    
                // use this.form to do some calculation...
                // element is <button data-action="calculator.sum">...</button>
                // params is an empty object
            }
        };
    
        // Create the front controller
        var frontController = new Oxydizr.FrontController()
            .init(document.documentElement);
    
        // Create your calculator controller
        var calculator = new Calc("calculator");
    
        // Register your calculator controller with the front controller to wire up event handling
        frontController.registerController(calculator);
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles