Калькулятор перестал работать на js

Question

После того как я в методе GetEventObject вместо calculator.OperationNumber(Iner) прописал this.OperationNumber(Iner), калькулятор перестал работать.

Прошу ответа с объяснением.

calculator = {
            Plus: document.getElementById('plus'),
            Minus: document.getElementById('minus'),
            Input1: document.getElementById('numb1'),
            Input2: document.getElementById('numb2'),

            start: function () {

                this.Plus.addEventListener('click', calculator.GetEventObject);
                this.Minus.addEventListener('click', calculator.GetEventObject); 

            },

            GetEventObject: function() {

                Iner = event.currentTarget.innerHTML;
                this.OperationNumber(Iner);

            },

            OperationNumber: function(Code) {

                Numb1 = Number(this.Input1.value);
                Numb2 = Number(this.Input2.value);

                if (Code === "+") {
                    total = Numb1 + Numb2;
                };

                if (Code === "-") {
                    total = Numb1 - Numb2;
                };

                alert(total);

            },



        };

        calculator.start();</code></pre>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="index2.css" rel="stylesheet" type="text/css">
</head>
<body>

    <button id="plus">+</button>
    <button id="minus">-</button>

    <input type="number" name="numb" id="numb1">
    <input type="number" name="numb" id="numb2">
</body>  
</html>

А как должно происходить взаимодействие с this, если экземпляр не создан? — Алексей Шиманский, Sep 13 '21 at 08:27
@АлексейШиманский, какой экземпляр, это же уже объект... — Qwertiy, Sep 13 '21 at 10:33

score 0 · Answer 1 · answered Sep 13 '21 at 10:26

Дело в том ,что функция GetEventObject вызывается не при помощи методов объекта calculator , а через событие элемента. То есть в this (GetEventObject) будет приходить элемент а не объект calculator. Вам нужно вручную "присвоить" для GetEventObject другой this (calculator).

Это можно сделать через bind.

Вот как это делается

Код без bind:

const SmartObject = {
    testElem:document.getElementById('test'),
    SetEvent:function(){
        this.testElem.addEventListener('click',this.$this)
    },
    $this:function(){
       console.log(this)
    }
}
SmartObject.SetEvent();

    <div id="test">CLICK</div>

Код с bind:

const SmartObject = {
    testElem:document.getElementById('test'),
    SetEvent:function(){
        this.testElem.addEventListener('click',this.$this.bind(this)) /// это всё что изменилось
    },
    $this:function(){
       console.log(this)
    }
}
SmartObject.SetEvent();

   <div id="test">CLICK</div>

Калькулятор перестал работать на js

1 Answers1