如何在handler函数中识别点击按钮并实现对应数值赋值逻辑？

嗨，我来帮你搞定这个问题！要在addGraph()函数里区分是哪个按钮被点击，从而设置不同的数值，有几种简单实用的方法，我结合你的代码给你演示：

方法1：给点击事件传递按钮标识/元素 #

直接在按钮的onclick属性里传入按钮的ID或者按钮本身，这样函数里就能直接判断：

传递按钮ID的写法 #

修改你的HTML按钮部分：

<p><button onclick="addGraph('buttonOne')" id="buttonOne">Create Graph/Chart</button></p>
<p><button onclick="addGraph('buttonTwo')" id="buttonTwo">Create...</button></p>

然后对应的JS函数：

function addGraph(buttonId) {
  let targetValue;
  // 根据传入的ID判断是哪个按钮
  if (buttonId === 'buttonOne') {
    targetValue = "1"; // 你要的字符串"1"
  } else if (buttonId === 'buttonTwo') {
    targetValue = 2; // 你要的数字2
  }
  // 这里可以添加你后续需要的逻辑，比如把值赋值给某个变量
  console.log('当前设置的数值:', targetValue);
}

直接传递按钮元素的写法 #

也可以把按钮本身传进去，这样能获取更多按钮的属性：

<p><button onclick="addGraph(this)" id="buttonOne">Create Graph/Chart</button></p>
<p><button onclick="addGraph(this)" id="buttonTwo">Create...</button></p>

JS函数：

function addGraph(clickedButton) {
  let targetValue;
  if (clickedButton.id === 'buttonOne') {
    targetValue = "1";
  } else if (clickedButton.id === 'buttonTwo') {
    targetValue = 2;
  }
  console.log('当前设置的数值:', targetValue);
}

方法2：利用事件对象获取触发元素 #

不需要修改HTML里的onclick参数，直接在函数里通过event.target拿到被点击的按钮元素：

function addGraph() {
  const clickedButton = event.target;
  let targetValue;
  if (clickedButton.id === 'buttonOne') {
    targetValue = "1";
  } else if (clickedButton.id === 'buttonTwo') {
    targetValue = 2;
  }
  console.log('当前设置的数值:', targetValue);
}

这种方式更简洁，不用在HTML里额外传参，适合不想改动太多HTML结构的场景。

进阶：分离HTML与JS（推荐） #

如果你的项目比较复杂，推荐把事件监听和HTML分离，这样代码更易维护：

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮元素
  const buttonOne = document.getElementById('buttonOne');
  const buttonTwo = document.getElementById('buttonTwo');

  // 给每个按钮绑定独立的点击事件
  buttonOne.addEventListener('click', function() {
    setTargetValue("1");
  });

  buttonTwo.addEventListener('click', function() {
    setTargetValue(2);
  });

  // 统一处理数值设置的函数
  function setTargetValue(value) {
    // 这里写你设置数值的逻辑，比如赋值给某个全局变量或者DOM元素
    console.log('设置的数值:', value);
  }
});

这样HTML里的按钮就不需要写onclick属性了，完全由JS控制，更符合现代前端开发的规范。

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