如何使具有相同 function 的兩個按鈕工作？
[英]How can I make two buttons with the same function work?
問題描述
謝謝你的時間。 由於我添加了兩個以上的按鈕（運行代碼並按下“添加表”按鈕），它所做的只是向第一個表添加兩個新行，而后續按鈕不起作用。 我試過調用類，使用循環，並將代碼放在它應該在的地方，但它仍然拒絕。 這是我的代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="WELPPproto.css">
</head>
<body>
<h1 style="font-family:verdana">Word List</h1>
<table id="list">
<tr>
<th scope="col">Word</th>
<th scope="col">English</th>
<th scope="col">Pronunciation</th>
<th scope="col"><button class="deletethismaybe" id="deletethismaybe" type="button" title="delete this table">X</button></th>
</tr>
<tfoot>
<tr>
<div class="boxy_gril">
<td><input type="text" id="w" class="w" required /></td>
<td><input type="text" id="m" class="m" required /></td>
<td><input type="text" id="p" class="p" /></td>
</div>
</tr>
<tr>
<td colspan="3"><div class="button_boi"><button type="button" class="button_boi" id="add">Enter</button>
</div></td>
</tr>
</tfoot>
</table>
<div id="ntable" class="ntable" >
<section>
</section>
</div>
<br>
<br>
<button class="button_gril" id="addtable">Add Table</button>
<script>
document.getElementById("addtable").onclick = function() {
let puttable = document.getElementById("ntable");
let section = puttable.querySelector('section');
let tableHTML = '<br><br>' + '<table id="list">' + '<tr>' +
'<th scope="col">' + 'Word' + '</td>' +
'<th scope="col">' + 'English' + '</th>' +
'<th scope="col">' + 'Pronunciation' + '</th>' + '<th><button class="deletethismaybe" id="deletethismaybe" type="button" title="delete this table">X</button></th>' +
'</tr>' +
'<tfoot><tr><div class="boxy_gril">' +
'<td><input type="text" id="w" class="w" required /></td>'+
'<td><input type="text" id="m" class="m" required />' +
'</td><td><input type="text" id="p" class="p" /></td>' +
'</div></tr>' + '<tr>' + '<td colspan="3">' + '<div class="button_boi">' + '<button type="button" class="button_boi" id="add">Enter</button>' + '</div>' + '</td>'+ '</tr>' + '</tfoot>' + '</table>';
section.insertAdjacentHTML('beforebegin', tableHTML);
}
document.addEventListener('click', (e) => {
let thatTarget = e.target;
let thatBtn = thatTarget.closest('.deletethismaybe');
if (thatBtn) {
e.preventDefault();
thatTarget.closest('table').remove();
thatTarget.closest('button').remove();
}
})
var asdf = document.getElementsByClassName("button_boi");
for (var i = 0; i < asdf.length; i++) {
asdf[i].onclick = function() {
let listTable = document.getElementById("list");
let tfoot = listTable.querySelector('tfoot');
let wordValue = document.getElementById("w").value;
let engValue = document.getElementById("m").value;
let pronunValue = document.getElementById("p").value;
let trHTML = '<tr>' +
'<td>' + wordValue + '</td>' +
'<td>' + engValue + '</td>' +
'<td>' + pronunValue + '</td>' + '<td><button class="deletethis" type="button" title="delete this row">X</button></td>' +
'</tr>';
tfoot.closest('tfoot').insertAdjacentHTML('beforebegin', trHTML);
}
}
document.addEventListener('click', (e) => {
let thisTarget = e.target;
let thisBtn = thisTarget.closest('.deletethis');
if (thisBtn) {
e.preventDefault();
thisTarget.closest('tr').remove();
}
})
document.getElementsByClassName('.deletethismaybe').onclick = function() {
let thatTarget = e.target;
let thatBtn = thatTarget.closest('.deletethismaybe')
if (thatBtn) {
e.preventDefault();
thatTarget.closest('table').remove();
}}
</script>
</body>
</html>
2 個解決方案
解決方案1
1 2022-06-09 03:13:10
那是因為您創建的事件偵聽器只偵聽那些最初已經創建的事件偵聽器。 當新元素添加到 DOM 中時，您還必須向它們添加另一個事件偵聽器。
這是有關如何操作的示例：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="lists">
<li class="list-item">
<div>List #1</div>
<button class="btn-delete">Delete</button>
</li>
</ul>
<div>
<button id="btn-add">Add new item to list</button>
</div>
<script>
const listsEl = document.getElementById('lists');
// Delete button elements
let deleteBtnEls = document.querySelectorAll('.btn-delete');
const deleteBtnOnClick = (e) => {
const listItemEl = e.target.closest('.list-item');
listsEl.removeChild(listItemEl);
};
const removeEventListeners = () => {
deleteBtnEls.forEach((deleteBtnEl) => {
deleteBtnEl.removeEventListener('click', deleteBtnOnClick);
});
};
const updateEventListeners = () => {
// remove existing event listeners to prevent duplicate event listeners
removeEventListeners();
// get the updated list of delete button elements
deleteBtnEls = document.querySelectorAll('.btn-delete');
deleteBtnEls.forEach((deleteBtnEl) => {
deleteBtnEl.addEventListener('click', deleteBtnOnClick);
});
};
// Add new item button element
const addBtnEl = document.getElementById('btn-add');
addBtnEl.addEventListener('click', () => {
const newListItemEl = document.createElement('li');
newListItemEl.className = 'list-item';
newListItemEl.innerHTML = `
<div>List #${listsEl.childElementCount + 1}</div>
<button class="btn-delete">Delete</button>
`;
listsEl.appendChild(newListItemEl);
updateEventListeners();
});
// Initial call
updateEventListeners();
</script>
</body>
</html>
解決方案2
0 已采納 2022-06-09 17:17:30
我認為您必須嘗試了解JavaScript 事件委托。 Google 上有很多關於此的教程，例如1 、 2 、 3等等。
如果您了解它是如何工作的，那么您不必創建或調用許多事件偵聽器，這對您來說將很容易並且非常有幫助。
讓我們看看我的例子。
let addNewBtn = document.getElementById('add-new-btn'); addNewBtn.onclick = function() { let newBtnHTML = '<button class="addtext" type="button">Add some text</button>'; document.getElementById('new-button-placeholder').insertAdjacentHTML('beforeend', newBtnHTML); }; // below is how event delegation works. // start with listen for click event on root element (`document`) document.addEventListener('click', (e) => { let thisTarget = e.target; // the code above is to get `.target` property of clicked element for use later. let thisBtn = thisTarget.closest('.addtext'); // the code above is to get closest button that has `addtext` in the class value. If this button is not exists then it will not go inside the `if` below. if (thisBtn) { // if this button exists. e.preventDefault();// this is for prevent default action in case of form submit. It is no need in this example but just in case you may have to use it later. // now add some text to `.debug` HTML element. let someText = 'Hello world'; document.querySelector('.debug').insertAdjacentHTML('beforeend', '<p>' + someText + '</p>'); } // if button is not exists, it will be ignore and has nothing to work here anymore. });
.debug { border: 2px dashed #ccc; margin-bottom: 20px; padding: 10px; }
<div class="debug"></div> <button class="addtext" type="button">Add some text</button> <button id="add-new-btn" type="button">Add new button that will be clicked and add some text</button> <hr> <div id="new-button-placeholder"></div>
請閱讀上面的代碼注釋，因為我一步一步地描述了一切。
當您單擊添加一些文本和添加將被單擊的新按鈕並添加一些文本按鈕時，上面的示例代碼將起作用。 新添加的按鈕將以與現有按鈕相同的方式工作，無需調用或添加任何新的事件偵聽器。
這就是事件委托的工作方式。
現在開始你的工作。
- JS動態添加的HTML不要使用相同的
id。id="deletethismaybe"或任何id=".."的刪除按鈕在您添加時具有相同的值，應省略。 使用class=".."代替。 這是有效的 HTML。 - 如果可能，請在所有內容上使用描述性名稱。 沒有
deletethismaybe或thatBtn等，因為您將來會混淆自己。 -
td或th只能在tr內，不能在div內。 所以，<div class="boxy_gril">是無效的 HTML！
document.getElementById("addtable").onclick = function() { let puttable = document.getElementById("ntable"); let section = puttable.querySelector('section'); let tableHTML = '<br><br>' + '<table class="list">' + '<tr>' + '<th scope="col">' + 'Word' + '</td>' + '<th scope="col">' + 'English' + '</th>' + '<th scope="col">' + 'Pronunciation' + '</th>' + '<th><button class="delete-table" type="button" title="delete this table">X</button></th>' + '</tr>' + '<tfoot><tr>' + '<td><input type="text" class="w" required /></td>' + '<td><input type="text" class="m" required />' + '</td><td><input type="text" class="p" /></td>' + '</tr>' + '<tr>' + '<td colspan="3">' + '<div class="button_boi">' + '<button type="button" class="button_boi addrow">Enter</button>' + '</div>' + '</td>' + '</tr>' + '</tfoot>' + '</table>'; section.insertAdjacentHTML('beforebegin', tableHTML); } // listen click event from root element (`document`). document.addEventListener('click', (e) => { let thisTarget = e.target; // work with delete table button. let deleteTableBtn = thisTarget.closest('.delete-table'); if (deleteTableBtn) { // if delete button exists. e.preventDefault(); thisTarget.closest('table').remove(); } // end // work with add row button. let addRowBtn = thisTarget.closest('.addrow'); if (addRowBtn) { // if add row button exists. e.preventDefault(); // get closest table element for use later. let thisTable = addRowBtn.closest('table'); // get input values that is under this table where add button was clicked. let wordValue = thisTable.querySelector('.w').value; let engValue = thisTable.querySelector('.m').value; let pronunValue = thisTable.querySelector('.p').value; // generate new table row (`tr`) let trHTML = '<tr>' + '<td>' + wordValue + '</td>' + '<td>' + engValue + '</td>' + '<td>' + pronunValue + '</td>' + '<td><button class="delete-row" type="button" title="delete this row">X</button></td>' + '</tr>'; thisTable.querySelector('tfoot').insertAdjacentHTML('beforebegin', trHTML); } // end // work with delete row button. let deleteRowBtn = thisTarget.closest('.delete-row'); if (deleteRowBtn) { // if delete row button exists. e.preventDefault(); thisTarget.closest('tr').remove(); } // end })
<h1 style="font-family:verdana">Word List</h1> <table class="list"> <tr> <th scope="col">Word</th> <th scope="col">English</th> <th scope="col">Pronunciation</th> <th scope="col"><button class="delete-table" type="button" title="delete this table">X</button></th> </tr> <tfoot> <tr> <td><input type="text" id="w" class="w" required /></td> <td><input type="text" id="m" class="m" required /></td> <td><input type="text" id="p" class="p" /></td> </tr> <tr> <td colspan="3"> <div class="button_boi"><button type="button" class="button_boi addrow">Enter</button> </div> </td> </tr> </tfoot> </table> <div id="ntable" class="ntable"> <section> </section> </div> <br> <br> <button class="button_gril" id="addtable">Add Table</button>
從上面的代碼中，您將看到我只使用了一個事件偵聽器，並檢測到它來自哪個按鈕， if條件存在，則在內部使用它。
在jsfiddle中查看。
再次：請嘗試理解我從一開始就描述的事件委托，因為我相信它會對你有用。
如何使兩個相同的類對相同的 javascript function 以不同的方式工作？
[英]How do I make two identical classes work differently with the same javascript function?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.