javascript - 为什么 DOM 我的事件不工作并且样式改变？

Question

首先，让我告诉你我的目的。如果条目为空，则会出现一个 divin，但是当输入某些内容时，divin 将是“display: none”。我希望发生这种情况，但如视频所示，如果输入值为空白并且有效，我告诉我不要按删除键，3 个单词和“我删除了数字 8”在屏幕录制中只出现了 3 次. 奇怪的是，当缓慢按下删除键时，divim 成功“显示：阻止”，但是当我握住手指而不拉它时（我在按键事件中尝试过）它不会那样做。您可以在我的 github 帐户上查看所有代码。完整代码：https ://github.com/BerkayAkgurgen/Film-ProjectAPI/tree/main
Screen Record

// key event
searchInput.addEventListener('keydown', e => {
        let control = false
        if (e.which == 8 && searchInput.value.trim() == "") {
            control = true
        } else {
            control = false
        }
        if (control) {
            e.preventDefault()
            return
        }
        console.log(e.which);
    })

where I check empty input 
if (inputValue == "" || !isNaN(inputValue)) {
        ui.clearInput()
        ui.returnBack()
    } else {
        filmRequest.getDatas(inputValue)
            .then(data => {
                ui.displayResults(data)
                ui.resultUI()
            })
    }

// Style Changes
returnBack() {
        this.mostPopulerHeader.style.display = "block"
        this.topParents.style.display = "grid"
        this.resultHeader.style.display = "none"
        this.resultParent.style.display = "none"
    }

    resultUI() {
        this.mostPopulerHeader.style.display = "none"
        this.topParents.style.display = "none"
        this.resultHeader.style.display = "block"
        this.resultParent.style.display = "grid"
    }

标签： javascriptcssdom