CSS演示框中带onclick的按钮需点击两次才执行函数，如何修复？

你当前的代码逻辑存在重复绑定事件的问题：第一次点击按钮时，changeStyle函数才会给所有.option按钮添加点击事件监听器——这意味着第一次点击只是完成事件绑定，第二次点击才会触发实际修改样式的逻辑，所以需要点击两次才生效。

以下两种方案都能解决点击一次触发的问题，可根据需求选择：

方案一：直接处理当前点击的按钮（修改原有逻辑） #

步骤1：修改HTML的按钮onclick，传入当前按钮元素 #

<button type="button" value="0.2rem" class="option" onclick="changeStyle('wordSpacing', this)">
  <span>word-spacing: 0.2rem;</span>
</button>

步骤2：重构changeStyle函数，直接处理传入的按钮 #

function changeStyle(regola, btn) {
  // 获取当前按钮的value值
  var value = btn.value;
  var result = document.getElementById('result');
  // 直接修改目标元素的样式
  result.style[regola] = value;
}

点击按钮时会直接执行样式修改逻辑，无需额外绑定事件。

方案二：页面加载完成后一次性绑定事件（更规范的写法） #

这种方式可以避免HTML与JS的耦合，同时防止重复绑定事件：

步骤1：修改HTML，移除onclick，用自定义属性存储规则名 #

<button type="button" value="0.2rem" class="option" data-rule="wordSpacing">
  <span>word-spacing: 0.2rem;</span>
</button>

步骤2：在页面加载完成后统一绑定点击事件 #

// 等待DOM加载完成后执行绑定
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.option').forEach(btn => {
    btn.addEventListener('click', function() {
      // 从自定义属性获取规则名
      var regola = this.dataset.rule;
      var value = this.value;
      var result = document.getElementById('result');
      result.style[regola] = value;
    });
  });
});

页面加载完成后，所有按钮会自动绑定点击事件，点击一次即可触发样式修改。

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