I want to set up and write an onclick event handler by HTML for the undo link.(我想通过HTML为撤消链接设置并编写一个onclick事件处理程序。)
Delete the last ordered item for every clicking of the undo link and update total quantity.(每次单击撤消链接都会删除最后订购的商品，并更新总数量。) And cancel the onclick event at the end of the event handler (ie clicking the link will not go to any destination, not even an internal link).(并在事件处理程序的末尾取消onclick事件（即，单击链接将不会到达任何目的地，甚至不会到达内部链接）。)
How should I modify my script to make these possible?(我应该如何修改脚本以使之成为可能？) Thanks!(谢谢！)
<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>
ask by nerdy translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
