Question

我正在添加一个添加2个数字的示例应用程序。我正在尝试为此做一个课程。下面是我的HTML和Javascript。现在从添加方法

中收到错误

未捕获的TypeError：无法读取属性'val'of undefined'。

我知道这是由于事件监听器中的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>

Answer 1

marksCalculatorObj.add.bind(marksCalculatorObj));

Javascript中的类和事件监听器

1 个答案: