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