javascript - 没有定义点击事件的 Html 按钮仍然调用一个函数

Question

我有 2 <buttons>在我的 html 代码中，其中一个有一个 onclick功能，但另一个只是我尚未定义的按钮。奇怪的是，尚未定义的按钮具有相同的 onclick属性(property)作为另一个。有人可以解释为什么会这样吗？

这是一个代码片段:

saveRuleSelections: function() {
  let blackjackRules = [];
  let rules = document.getElementsByClassName("rule");
  for (let i = 0; i < rules.length; i++) {
    blackjackRules.push(rules[i].value);
  }
  let jsonBlackjackRules = JSON.stringify(blackjackRules);
  localStorage.setItem("blackjackRules", jsonBlackjackRules);
  document.getElementById("rules_overlay").style.display = "none";
}

<form>
  <p>Surrender Allowed:
    <select class="rule">
      <option value="early">Early</option>
      <option value="late">Late</option>
      <option value="no" selected>No</option>
    </select>
  </p>
  <button id="select_rules_button" onclick="trueCountApp.saveRuleSelections()">Select Rules</button>
  <button>Restore Default</button>
</form>

Answer 1

两个表单都具有相同的提交值，因为它们在表单内部没有不同的值，现在两者都将采用相同的提交表单值并因此触发函数，就像一个克隆。尝试

<form>
  <p>Surrender Allowed:
    <select class="rule">
      <option value="early">Early</option>
      <option value="late">Late</option>
      <option value="no" selected>No</option>
    </select>
  </p>
  <button id="select_rules_button" onclick="trueCountApp.saveRuleSelections()">Select Rules</button>
  <button type="reset" value="Reset">Restore Default</button>
</form>