如何在onclick绑定的vote函数执行后追加调用changeColor函数

HTML元素不支持同时配置多个同名的onclick属性，后声明的属性会直接覆盖前面的事件绑定。你同时用th:attr生成onclick、又手动写了原生onclick属性，模板渲染后最终只会保留其中一个绑定，自然无法按预期依次执行两个函数。

方案1：同属性内按顺序拼接两个函数调用（最简便） #

直接在Thymeleaf的th:attr绑定里，用分号把两个函数按执行顺序拼接，JS会自动按顺序执行：

<button
  class="ratingButton"
  th:attr="onclick=|vote('${listAnswer.answer_id}','+1');changeColor()|"
>
  <i class="fa fa-star fa-2x"></i>UpVote
</button>
<br><br>

注意：如果vote是包含接口请求的异步函数，这种写法不会等接口返回就直接执行changeColor()，会出现样式提前修改的问题，异步场景推荐用方案2。

方案2：抽离统一的事件处理函数（推荐，易维护） #

把投票+改样式的逻辑合并到一个专门的处理函数里，逻辑和视图分离，还能方便处理异步等待：
首先在JS代码块里定义统一处理方法：

async function handleVote(answerId, voteType) {
  // 如果vote是异步请求函数，加await等待投票逻辑执行完成
  await vote(answerId, voteType);
  // 投票完成后再修改样式
  changeColor();
}

然后按钮上只需要绑定这一个处理函数即可：

<button
  class="ratingButton"
  th:attr="onclick=|handleVote('${listAnswer.answer_id}','+1')|"
>
  <i class="fa fa-star fa-2x"></i>UpVote
</button>
<br><br>

这种写法不管vote是同步还是异步逻辑，都能保证严格按照「先投票、后改样式」的顺序执行，后续要加投票失败回滚、计数更新之类的逻辑也更方便。

不要尝试给同一个元素写多个同名的事件属性，不管是原生HTML还是模板引擎渲染，重名属性最终只会生效一个。如果需要绑定多个执行逻辑，要么在同一个事件绑定里按顺序调用，要么用addEventListener多次绑定事件（这种方式绑定的多个回调会按绑定顺序依次执行）。

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