为什么我更改目标按钮的 innerText 的功能会更改所有按钮的 innerText？

Question

这是我的第一个 JS 项目。
我正在创建一个学习计划程序，用户可以在其中输入待办事项并将其分配给一天。
JS 创建必要的元素（输入字段、垃圾桶按钮、完成按钮、开始时间按钮和结束时间按钮）。我的时间选择器有问题。
我编写了一个函数，当用户单击开始按钮（在 JS 中创建）时，它会取消隐藏时钟（我在 html 中编写）。可以有无限的 startButtons 所以我为这些按钮的数组写了一个 eventListener。
用户选择小时、分钟和 am/pm，它们都存储在变量中，然后当他们单击 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>

为了让应用按预期运行，您应该进行以下更改：

在showTimePicker外定义startOrEndTimeButton变量。
将 setTimeoutButton 移到 showTimePicker 之外。

正如 Jojo 先生 正确指出的那样，您不希望每次单击 [=22] 时都在 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>

为什么我更改目标按钮的 innerText 的功能会更改所有按钮的 innerText？

Why is my function to change the innerText of a targeted button changing the innerText of all the buttons?

javascript

arrays

function

foreach

addeventlistener