javascript - 通过 HTML 为撤消链接设置 Onclick 事件处理程序

Question

我想为撤消链接通过 HTML 设置和编写一个 onclick 事件处理程序。每次单击撤消链接都会删除最后订购的商品并更新总数量。并在事件处理程序结束时取消 onclick 事件(即单击链接不会转到任何目的地，甚至不会转到内部链接)。

我应该如何修改我的脚本以使这些成为可能？谢谢!

<div id="Sushi" class="tabcontent">
   <form action="#" method="get">
      <table border="0" style="width:100%">
         <tr>
            <td>
               <img src="sushi-1.jpg" id="su1-img" title="Sushi Set A">
               <input id="su1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="su1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
            <td>
               <img src="sushi-2.jpg" id="su2-img" title="Sushi Set B">
               <input id="su2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="su2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
            <td>
               <img src="sushi-3.jpg" id="su3-img" title="Sushi Set C" width="125" height="135">
               <input id="su3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="su3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
         </tr>
         <tr>
            <td rowspan="3">
               <img src="sushi-4.jpg" id="su4-img" title="Sushi Set D">
               <input id="su4-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="su4" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
         </tr>
      </table>
   </form>
</div>
<div id="Drinks" class="tabcontent">
   <form action="#" method="get">
      <table border="0" style="width:100%">
         <tr>
            <td>
               <img src="drink-1.jpg" id="dr1-img" title="Guava juice">
               <input id="dr1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="dr1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
            <td>
               <img src="drink-2.jpg" id="dr2-img" title="Lemonade">
               <input id="dr2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="dr2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
            <td>
               <img src="drink-3.jpg" id="dr3-img" title="Orange juice" width="125" height="135">
               <input id="dr3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="dr3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
         </tr>
      </table>
   </form>
</div>
<div id="Dessert" class="tabcontent">
   <form action="#" method="get">
      <table border="0" style="width: 100%;">
         <tr>
            <td>
               <img src="dessert-1.jpg" id="de1-img" title="Raspberry cheese cake" width="140" height="125">
               <input id="de1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="de1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
         </tr>
      </table>
   </form>
</div>
<div style="border:0px;" id="order">
   <center>
      <h2><b>Ordered Items</b></h2>
      14 Mar 2017 15:59
      <br><br>
      Table:4 - No. of Guests 3
      <table class="nth-table" id="orderlist" border="1">
         <thread>
            <tr>
               <th>Description</th>
               <th>Qty</th>
            </tr>
         </thread>
         <tbody>
            <tr>
            </tr>
         </tbody>
         <tfoot>
            <tr>
               <td align="left"><strong>Total</strong></td>
               <td align="right" id="val"><strong></strong></td>
            </tr>
         </tfoot>
      </table>
      <br>
      <div class="noPrint">
         <a href="Order.html">undo</a>
      </div>
   </center>
   <br>
</div>

<script>
var total = 0;

function registerHandlers() {
    var buttons = document.querySelectorAll('.button');
    [].slice.call(buttons).forEach(function(button) {
        button.addEventListener('click', onClick, false);
    });
}

function onClick(event) {
    event.preventDefault();
    var button = event.target;
    var id = button.id;
    var desc = document.getElementById(id + '-img').getAttribute('title');
    var qty = document.getElementById(id + '-qty').value;
    total += parseInt(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;
}

registerHandlers();
</script>

Answer 1

向任何元素添加任何事件处理程序的过程始终相同。

分为三个步骤:

1. 抓取元素
2. 声明函数
3. 将 EventListener 附加到元素，包括引用已声明函数的回调

这是一个例子:

// GRAB THE ELEMENT
const myUndoLink = document.getElementsByClassName('my-undo-link')[0];

// DECLARE THE FUNCTION
const myUndoFunction = () => {

  [... FUNCTION HERE...]

}

// ATTACH THE EVENT LISTENER TO THE ELEMENT
myUndoLink.addEventListener('click'), myUndoFunction, false);