Javascript onclick css 元素的事件

Question

我制作了一個 css 元素來反轉整個網站，就像在黑暗模式下一樣......我能夠使用一個鍵碼來切換 css 元素並且它工作得很好......但問題是我想使用一個按鈕切換元素

css >

.dark-mode{
    filter: invert(1) hue-rotate(180deg)
}

.invert{
    filter: invert(1) hue-rotate(180deg)
}

Javascript >

    document.onkeypress = function (e) {
        e = e || window.event;
        
        if(e.keyCode === 13){
            document.documentElement.classList.toggle('dark-mode');
            
            document.querySelectorAll('.inverted').forEach((result) => {
                result.classList.toggle('invert');
            })
        }
    }
    

這些代碼工作正常，但我想用一個按鈕來切換它.....

Answer 1

<buton onclick="invert()" > Invert </button>

使用與您為 invert() 編寫的相同的 function

Answer 2

將切換代碼放入命名為 function 中。然后從按鍵偵聽器和按鈕上的點擊偵聽器調用它。

 function toggle_scheme() { document.documentElement.classList.toggle('dark-mode'); document.querySelectorAll('.inverted').forEach((result) => { result.classList.toggle('invert'); }) } document.querySelector("toggle-scheme").addEventListener("click", toggle_scheme); document.addEventListener("keypress", function(e) { if (e.keyCode === 13) { toggle_scheme(); } });