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

這是我的第一個 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')); 
  })
} 

uj5u.com熱心網友回復：

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

• 單擊其中一個按鈕，然后單擊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. 定義startOrEndTimeButton外部變數showTimePicker。
2. 移到setTimeoutButton外面showTimePicker。

正如Jojo 先生正確指出的那樣，您不想Event Listener在setTimeoutButton每次單擊 a 時都設定 a startButton。

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

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>

標籤：javascript 数组 功能 前锋 添加事件监听器

上一篇：從另一個檔案中的函式匯入變數

下一篇：VMware Workstaion-從零創建centos虛擬機