Class and Event Listeners in Javascript

Question

I am adding a sample application which add 2 numbers. I am trying to make a class for this. Below is my HTML and Javascript. Now getting an error from add method

Uncaught TypeError: Cannot read property 'val'of undefined'.

I know this is due to this context in event listeners. Can you please guide how to deal this?

<html>
    <head>
        <title>JS Tips</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
        <script>
            /**
             * Class for calculating marks
             */
            var MarksCalculator = function () {
                //Scope globalization. This is important. It helps us to use this context in other context

                return {
                    // Variable declaration
                    e1: "",
                    e2: "",
                    e3: "",
                    science_mark: "",
                    maths_mark: "",
                    init: function (e1, e2, e3) {
                        // Variable initilization
                        this.e1 = e1;
                        this.e2 = e2;
                        this.e3 = e3;
                    },
                    // Adding marks
                    add: function () {
                        this.science_mark = this.e1.val();
                        this.maths_mark = this.e2.val();
                        if (this.validateMarks()) {
                            // Getting the values
                            m1 = parseInt(this.science_mark);
                            m2 = parseInt(this.maths_mark);
                            // Adding the value and assigning to result element.
                            this.e3.html(m1 + m2);
                        }
                    },
                    // Adding event listner
                    addListener: function (el, type, fn) {
                        // Jquery bind function
                        el.bind(type, fn);
                    },
                    validateMarks: function () {

                        var alertMsg = "Enter a valid number";
                        if (this.science_mark && this.maths_mark && !isNaN(this.science_mark) && !isNaN(this.maths_mark)) {
                            return true;
                        } else {
                            this.showAlert(alertMsg);
                        }
                    },
                    showAlert: function (msg) {
                        alert(msg);
                    }
                }
            }
        </script>

        <script type="text/javascript" >
            // MarksCalculator object 
            var marksCalculatorObj = new MarksCalculator();
            $(document).ready(function () {
                //calling init function
                marksCalculatorObj.init($("#num1"), $("#num2"), $("#result"));
                // adding event listners
                marksCalculatorObj.addListener($("#add"), "click", marksCalculatorObj.add);
            });
        </script>
    </head>
    <body>
        <h4>Total Marks in First Sem</h4>
        <input  type="text" id="num1" class="num1" placeholder="Marks in Science" />
        <input type="text" id="num2" class="num2" placeholder="Marks in Maths" />
        <button id="add" class="add">Add</button>
        <button  id="result" class="result">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
    </body>
</html>

When you assign or pass `someObject.someMethod`, the `someMethod` is detached from `someObject`, and has no memory of it. So instead of passing the method, pass a function that calls the method from the object. — , Jun 17 '16 at 14:52
@squint Solved by changing the line to marksCalculatorObj.addListener($("#add"), "click", function () {marksCalculatorObj.add()}); — Kiren S, Jun 17 '16 at 15:01

score -1 · Answer 1 · answered Jun 17 '16 at 14:54

-1

marksCalculatorObj.add.bind(marksCalculatorObj));

answered Jun 17 '16 at 14:54

bdc

79
3

Class and Event Listeners in Javascript

1 Answers1