如何将内联onclick的history.back按钮转为template.js中的纯JS代码

你的思路完全正确，HTML修改成带back类的按钮、JS里先判断按钮存在再绑定事件的逻辑都没问题，只需要在点击处理函数里补上核心的返回逻辑即可。

补全后的完整JS代码 #

if (document.querySelector(".back")) { 
  // 页面中只会有一个.back按钮实例
  let backButton = document.querySelector(".back"); 
  backButton.onclick = function handleClick() { 
    history.back(); // 核心逻辑：调用浏览器历史记录返回上一页
  } 
}

更推荐的写法（使用addEventListener） #

相比直接赋值onclick，用addEventListener可以绑定多个同类型事件，扩展性更好：

const backButton = document.querySelector(".back");
if (backButton) {
  backButton.addEventListener('click', () => {
    history.back();
    // 也可以用history.go(-1)，和history.back()效果完全一致
  });
}

简单说明：history.back()是浏览器原生API，作用就是让页面跳转到历史记录的上一页，和你原来内联代码里的逻辑完全相同。

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