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

我想通过HTML为undo链接设置并编写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>

订购物品
2017年3月14日15:59



表：4-宾客人数3
描述
数量
总计





var合计=0；
函数寄存器句柄（）{
var buttons=document.queryselectoral（'.button'）；
[].slice.call（按钮）.forEach（函数（按钮）{
addEventListener（'click'，onClick，false）；
});
}
函数onClick（事件）{
event.preventDefault（）；
var按钮=event.target；
var id=button.id；
var desc=document.getElementById（id+'-img'）.getAttribute（'title'）；
var qty=document.getElementById（id+'-qty'）。值；
总计+=parseInt（数量）
可添加表（描述、数量）；
}
功能添加表（说明，数量）{
变量行=“”+描述+“”+数量+“”；
var tbody=document.querySelector（“#orderlist tbody”）；
tbody.innerHTML=tbody.innerHTML+行；
document.getElementById（“val”）.innerHTML=总计；
}
寄存器句柄（）；

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

有三个步骤：

抓住元素

声明函数

将

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);

---

你为什么又问同样的问题@HiteshTripathi这是因为我想让Onclick事件处理程序通过HTML而不是Javascript来完成。有什么方法？与你的主要问题无关，但是

？这个代表性的元素在十年前被贬低了。“JurusiMaNICA我知道你的意思，但是我不能让我的桌子在中间对齐。我该怎么做呢？使用

#order{display:flex；justify content:center；}

您介意告诉我分别通过HTML和Javascript应用事件处理程序的情况吗？这样，我将有2种方法应用于按钮。谢谢@我不明白。你能再说一遍你的问题吗<代码>事件处理程序使用javascript附加到

DOM元素

。