按下回車鍵或單擊按鈕時如何創建一個按鈕來執行代碼？

Question

我創建了一個按鈕。 現在該按鈕僅在單擊該按鈕后才起作用。 我想要做的是，當我按下鍵盤上的“輸入”鍵或單擊按鈕時，我的代碼需要被執行。

怎么做？

 const befoClick= document.querySelector('.befoClick'); const afteClick=document.querySelector('.afteClick'); befoClick.addEventListener('click',()=>{ afteClick.classList.toggle('clicked'); });

 body{ display: grid; place-items: center; height:100vh; } button{ width:200px; height:50px; font-size:20px; cursor: pointer; border:none; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.befoClick{ background-color: rgb(74, 74, 255); }.afteClick{ background-color: rgb(67, 255, 77); visibility: hidden; }.clicked{ visibility: visible; }.bfrClick{ visibility: hidden; }

 <div class='allBtn'> <div > <button class='befoClick'>CLICK ME</button> </div> <div > <button class='afteClick'>CLICKED</button> </div> </div>

Answer 1

使用keyup事件偵聽器，然后檢查按下的鍵。

有兩個事件監聽器，所以我添加了一個單獨的 function。

 const befoClick= document.querySelector('.befoClick'); const afteClick=document.querySelector('.afteClick'); const toggleClass = () => afteClick.classList.toggle('clicked'); befoClick.addEventListener('click', toggleClass); document.addEventListener('keyup', (event) => { if (event.key === 'Enter') { toggleClass(); } });

 body{ display: grid; place-items: center; height:100vh; } button{ width:200px; height:50px; font-size:20px; cursor: pointer; border:none; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.befoClick{ background-color: rgb(74, 74, 255); }.afteClick{ background-color: rgb(67, 255, 77); visibility: hidden; }.clicked{ visibility: visible; }.bfrClick{ visibility: hidden; }

 <div class='allBtn'> <div > <button class='befoClick'>CLICK ME</button> </div> <div > <button class='afteClick'>CLICKED</button> </div> </div>

Answer 2

我們可以使用像['click', 'keyup]這樣的數組，然后在數組上使用forEach來監聽具有相同eventListener的兩個事件。

但是，如果您使用Enter ，它將觸發eventListener兩次，因為它會識別單擊和 Enter 按下本身。 因此，我們還需要運行腳本兩次。

然后在實際腳本中，您可以使用classList.toggle在單擊的 class 之間切換以應用樣式更改。

然后，您也可以在數組之間切換按鈕的textContent 。

 var eleButton = document.querySelector('.button'), buttonText = ['CLICK ME', 'CLICKED'], indexButtonText = 0; ['click', 'keyup'].forEach(el => { eleButton.addEventListener(el, function(e) { changeButton(); if (e.key == 'Enter') { changeButton(); } }); }); function changeButton() { indexButtonText = (indexButtonText == 0? 1: 0); eleButton.classList.toggle('clicked'); eleButton.textContent = buttonText[indexButtonText]; }

 body { display: grid; place-items: center; height: 100vh; } button { width: 200px; height: 50px; font-size: 20px; cursor: pointer; border: none; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgb(74, 74, 255); }.clicked { background-color: rgb(67, 255, 77); }

 <button class='button'>CLICK ME</button>