Блог

У меня есть PIN-панель класса в javascript, которую я отображаю на своей странице, как только пользователь нажмет «ОК», я хотел бы закрыть класс.

 class PinLogin {
    constructor ({el, maxNumbers = Infinity}) {
        this.el = {
            main: el,
            numPad: el.querySelector(".pin-login__numpad"),
            textDisplay: el.querySelector(".pin-login__text")
        };
        this.maxNumbers = maxNumbers;
        this.value = "";

        this._generatePad();
    }

  _generatePad() {
        const padLayout = [
            "1", "2", "3",
            "4", "5", "6",
            "7", "8", "9",
            "backspace", "0", "done"
        ];

        padLayout.forEach(key => {
            const insertBreak = key.search(/[369]/) !== -1;
            const keyEl = document.createElement("div");

            keyEl.classList.add("pin-login__key");
            keyEl.classList.toggle("material-icons", isNaN(key));
            keyEl.textContent = key;
            keyEl.addEventListener("click", () => { this._handleKeyPress(key) });
            this.el.numPad.appendChild(keyEl);

            if (insertBreak) {
                this.el.numPad.appendChild(document.createElement("br"));
            }
        });
    }

 _handleKeyPress(key) {
        switch (key) {
            case "backspace":
                this.value = this.value.substring(0, this.value.length - 1);
                break;
            case "done":
                this._attemptLogin();
                break;
            default:
                if (this.value.length < this.maxNumbers amp;amp; !isNaN(key)) {
                    this.value  = key;
                }
                break;
        }

        this._updateValueText();
    }

    _attemptLogin() {
        this.el.main.PinLogin == null;
    }
 

и вот как я называю pin-панель в mz index.cshtml

 <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<div class="pin-login" id="mainPinLogin" >
    <input type="number" readonly class="pin-login__text">
    <div class="pin-login__numpad">
    </div>
</div>


    <div>
     <script>
      function displayPinDialog() {
        var pinDialog = document.getElementById("mainPinLogin");
    
        if (pinDialog !== null) {
          pinDialog.style.display = "inline-block";
        }
      }
 

в методе _attemptLogin() я пытаюсь закрыть pin-панель, но это ничего не дает. Я попытался получить элемент на основе идентификатора и установить значение нет, но это также не работает. Не могли бы вы посоветовать, как отключить пин-код