如何为undo链接设置HTML onclick事件处理程序实现撤销功能

要实现你需要的undo功能，我们需要做几个关键改动：记录每次添加的数量、给undo链接绑定事件处理函数、实现删除最后条目并更新总数的逻辑，同时阻止链接的默认跳转行为。以下是具体步骤和修改后的代码：

1. 调整HTML中的Undo链接 #

先给undo链接加上唯一ID，方便我们在JS中获取它，同时把href改成#（避免默认跳转到其他页面的风险）：

<div class="noPrint">
  <a href="#" id="undoLink">undo</a>
</div>

2. 修改JavaScript逻辑 #

我们需要新增一个数组来跟踪每次添加的数量（这样删除时能准确减去对应数值），然后添加undo的事件处理函数：

var total = 0;
// 新增数组：存储每一条订单的数量，用于undo时计算总数量
var orderQuantities = [];

function registerHandlers() {
  var buttons = document.querySelectorAll('.button');
  [].slice.call(buttons).forEach(function(button) {
    button.addEventListener('click', onClick, false);
  });
  // 给undo链接绑定点击事件
  document.getElementById('undoLink').addEventListener('click', handleUndo, false);
}

function onClick(event) {
  event.preventDefault();
  var button = event.target;
  var id = button.id;
  var desc = document.getElementById(id + '-img').getAttribute('title');
  var qty = parseInt(document.getElementById(id + '-qty').value) || 1; // 处理空值或非数字情况
  total += qty;
  // 把当前添加的数量存入数组
  orderQuantities.push(qty);
  addToTable(desc, qty);
}

function addToTable(desc, qty) {
  var row = '<tr><td align="left">' + desc + '</td><td align="right">' + qty + '</td></tr>';
  var tbody = document.querySelector('#orderlist tbody');
  tbody.innerHTML = tbody.innerHTML + row;
  document.getElementById("val").innerHTML = total;
}

// 新增undo处理函数
function handleUndo(event) {
  // 1. 阻止链接的默认跳转行为
  event.preventDefault();
  
  var tbody = document.querySelector('#orderlist tbody');
  var rows = tbody.querySelectorAll('tr');
  
  // 只有当有订单条目时才执行删除操作
  if (rows.length > 0) {
    // 2. 删除最后一行订单
    tbody.removeChild(rows[rows.length - 1]);
    
    // 3. 从数组中取出最后一个数量，更新总数量
    var lastQty = orderQuantities.pop();
    total -= lastQty;
    
    // 4. 更新页面上的总数量显示
    document.getElementById("val").innerHTML = total;
  }
}

registerHandlers();

改动说明 #

• 订单数量跟踪：新增orderQuantities数组，每次添加订单时把数量存入，这样undo时能准确知道要减去多少。
• Undo事件绑定：在registerHandlers函数中给undo链接绑定handleUndo函数。
• 阻止默认行为：在handleUndo开头调用event.preventDefault()，彻底阻止链接跳转。
• 安全处理：添加了对空值/非数字数量的处理（parseInt(...) || 1），避免NaN错误；同时判断只有存在订单时才执行删除，防止报错。

这样每次点击undo链接，就会移除最后一条订单，更新总数量，并且不会触发任何页面跳转~

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