簡體   English   中英

HTML 按鈕不調用 onclick 事件

[英]HTML Button does not call the onclick event

當我運行這個網頁時,我無法讓按鈕運行點擊事件。 我正在通過 window.onload function 中的 javascript 創建頁面內容,但按鈕的事件處理程序不起作用。 我無法讓按鈕寫入控制台。

 var items = [ "Item 1", "Item 2", "item 3", "item......etc" ]; window.onload = function() { // Get container element to append the new element var container = document.getElementById("myContainer"); // create an HTML element row for each item in the array for (let i = 0; i < items.length; i++) { console.log(items[i]); let strItem = items[i]; // Create a new div element let newDiv = document.createElement('div'); newDiv.innerHTML = '<div class="row mx-auto py-1"> \ <div class="col-12 col-sm-8 px-5"> \ <label>' + (i + 1) + '&nbsp;&nbsp;' + strItem + '</label> \ </div> \ <div class="col-12 col-sm-4 d-inline-block"> \ <button id="btn' + (i + 1) + '" class="btn btn-primary btn-block btn-sm d-sm-none">Button ' + (i + 1) + '</button> \ <button id="btn' + (i + 1) + '" class="btn btn-primary btn-sm d-none d-sm-inline-block">Button ' + (i + 1) + '</button> \ </div> \ </div>'; // Append the new element container.appendChild(newDiv); // Get the button element let button = document.getElementById('btn' + (i + 1)); // Add an event listener to the button button.addEventListener('click', function() { // Do something when the button is clicked console.log('Button ' + (i + 1) + ' was clicked'); }); } };
 <section id="myContainer"></section>

第一個問題是,您的按鈕沒有唯一 ID。 這就是為什么只有第一個按鈕起作用的原因。

然后你應該將eventListener移出 for 循環並使用querySelectorAll到 select 所有按鈕。 然后使用forEach迭代將eventListener添加到所有這些按鈕。

最后但同樣重要的是使用事件委托( eventListener 的eventListener中的參數)。 這樣你就可以讀出被點擊按鈕的id: parameter.target.id

 var items = [ "Item 1", "Item 2", "item 3", "item 4" ]; window.addEventListener('DOMContentLoaded', function() { // Get container element to append the new element const CONTAINER = document.getElementById('myContainer'); // create an HTML element row for each item in the array for (let i = 1; i < items.length + 1; i++) { let strItem = items[i-1]; // Create a new div element let newDiv = document.createElement('div'); newDiv.innerHTML = `<div class="row mx-auto py-1"> <div class="col-12 col-sm-8 px-5"> <label>${i} &nbsp; &nbsp; ${strItem}</label> </div> <div class="col-12 col-sm-4 d-inline-block"> <button id="btn${i}-1" class="btn btn-primary btn-block btn-sm d-sm-none">Button ${i}-1</button> <button id="btn${i}-2" class="btn btn-primary btn-sm d-none d-sm-inline-block">Button ${i}-2</button> </div> </div>`; // Append the new element CONTAINER.appendChild(newDiv); } //gets all the buttons const BUTTONS = document.querySelectorAll('button'); //adds an EventListener to all the buttons BUTTONS.forEach(button => button.addEventListener('click', function(element) { let buttonID = element.target.id; console.log(`Button ${buttonID} was clicked`); }) ) });
 <section id="myContainer"></section>

我重構了您的代碼,使其更清晰並符合當前標准。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM