JS如何实现点击HTML按钮时将其value属性值推入数组

实现点击HTML按钮时，将对应按钮的value属性值推入指定数组，但当前代码运行时始终只会推入btn1的value值，无法正确获取btn2的值。

原有问题代码 #

HTML部分 #

<button id="btn1" value="btn1" onclick="clicked()">BTN1</button>
<button id="btn2" value="btn2" onclick="clicked()">BTN2</button>

JavaScript部分 #

function clicked(){
  var btn = document.getElementById("btn1");
  var newBtn = btn.value;
  arraySelected.push(newBtn);
  console.log(arraySelected);
}

• 函数逻辑写死了通过document.getElementById("btn1")获取DOM元素，无论哪个按钮触发点击事件，代码都只会读取btn1的value值。
• 内联onclick事件绑定没有传入当前触发事件的按钮对象，函数无法定位实际被点击的元素。
• 代码未提前初始化arraySelected数组，直接执行push操作会抛出变量未定义的报错。

方案1：最小改动，内联事件传入当前元素 #

修改内联onclick的调用写法，传入代表当前元素的this参数，函数接收参数后即可读取对应按钮的value：
修改后HTML：

<button id="btn1" value="btn1" onclick="clicked(this)">BTN1</button>
<button id="btn2" value="btn2" onclick="clicked(this)">BTN2</button>

修改后JavaScript：

// 提前初始化目标数组
const arraySelected = [];
function clicked(currentBtn) {
  arraySelected.push(currentBtn.value);
  console.log(arraySelected);
}

方案2：逻辑分离，通过事件监听绑定（推荐） #

去掉HTML里的内联onclick属性，在JavaScript中统一绑定事件，通过事件对象的target属性获取实际触发点击的按钮，实现HTML和JS逻辑解耦：
修改后HTML：

<button id="btn1" value="btn1">BTN1</button>
<button id="btn2" value="btn2">BTN2</button>

修改后JavaScript：

const arraySelected = [];
// 选中所有按钮，逐个绑定点击事件
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', function(e) {
    // e.target 即为当前被点击的按钮元素
    arraySelected.push(e.target.value);
    console.log(arraySelected);
  })
})

两种方案都可以实现需求，第二种方案更符合前端代码分层的最佳实践，后续维护更方便。

内容的提问来源于stack exchange，提问作者Santi