為什么我更改目標按鈕的 innerText 的函數會更改所有按鈕的 innerText？

Question

這是我的第一個 JS 項目。
我正在創建一個學習計划程序，用戶在其中輸入一個待辦事項並將其分配給一天。
JS 創建必要的元素（輸入字段、垃圾桶按鈕、完成按鈕、開始時間按鈕和結束時間按鈕）。 我的時間選擇器有問題。
我編寫了一個函數，當用戶單擊 startButton（在 JS 中創建）時取消隱藏時鍾（我在 html 中編寫）。 可以有無限的 startButtons，所以我為這些按鈕的數組編寫了一個 eventListener。
用戶選擇小時、分鍾和上午/下午，它們都存儲在變量中，然后當他們單擊 setTimeButton 時，目標 startButton.innerText 應該更新以顯示這個時間。 我第一次運行它的功能。 之后，它正在更改目標 startButton 以及我單​​擊的每個以前的 startTime 按鈕。
這是代碼：

document.addEventListener('DOMContentLoaded', () => 
  Array.from(startButton).forEach(element => 
    element.addEventListener('click', showTimePicker)
) );

function showTimePicker(e) { 

  let startOrEndTimeButton = e.target           
  // show clock
  Array.from(time).forEach(element => element.classList.toggle('hide')) 

  // click setTimeButton to insert time into targeted start time or end time button
  setTimeButton.addEventListener('click', function() {

    startOrEndTimeButton.innerText = chosenHour.innerText 
                                  + ':' + chosenMinutes.innerText 
                                  + " " + chosenAmPm.innerText;
    startOrEndTimeButton.style.backgroundColor = '#39ff14';
    startOrEndTimeButton.style.color = 'white';   
    Array.from(time).forEach(element => element.classList.toggle('hide')); 
  })
} 

Answer 1

這是您的應用程序邏輯的簡化版本以及您描述的有問題的行為：

• 單擊其中一個按鈕，然后單擊“ Set ”按鈕，將更改該特定按鈕的值
• 單擊另一個按鈕，然后單擊Set按鈕將更改所選按鈕的值以及先前選擇的按鈕的值。

 const setTimeButton = document.getElementById("set"); const startButton = document.querySelectorAll("button.st"); document.addEventListener( 'DOMContentLoaded', () => Array.from( startButton ) .forEach( element => element.addEventListener( 'click', showTimePicker ) ) ); function showTimePicker( e ) { let startOrEndTimeButton = e.target setTimeButton.addEventListener( 'click', function () { console.log("event handler changing:", startOrEndTimeButton); startOrEndTimeButton.innerText = (Math.random() * 1000).toFixed(); }) }

 <button class="st one">Start 1</button> <button class="st two">Start 2</button> <button class="st three">Start 3</button> <button id="set">Set</button>

為了使應用程序按預期工作，您應該進行以下更改：

1. 在showTimePicker之外定義startOrEndTimeButton變量。
2. 將setTimeoutButton showTimePicker之外。

正如Jojo 先生正確指出的那樣，您不希望每次單擊startButton時都在setTimeoutButton上設置Event Listener 。

您可以運行這兩個示例中的代碼片段並自己檢查結果行為。 仔細研究代碼以了解為什么建議的更改會影響程序的行為，並留下評論以防您對建議的更改有任何疑問。

 const setTimeButton = document.getElementById("set"); const startButton = document.querySelectorAll("button.st"); document.addEventListener( 'DOMContentLoaded', () => Array.from( startButton ) .forEach( element => element.addEventListener( 'click', showTimePicker ) ) ); let startOrEndTimeButton; function showTimePicker( e ) { startOrEndTimeButton = e.target } setTimeButton.addEventListener( 'click', function () { startOrEndTimeButton.innerText = (Math.random() * 1000).toFixed(); })

 <button class="st">Start 1</button> <button class="st">Start 2</button> <button class="st">Start 3</button> <button id="set">Set</button>