将动态创建的按钮的文本内容传递给另一个元素

Question

我正在尝试使用纯 javascript 创建单页待办事项应用程序。页面上有一个按钮，它从文本框中获取文本值并创建一个具有该输入值的按钮。我想做的是将用户动态创建的按钮文本值传递给另一个元素，例如 h2 元素。这里有截图来解释我的意思；

键入列表名称并单击“创建列表”按钮；

使用输入的文本值创建了一个按钮。现在，当您单击 List 1 按钮时，该按钮的文本值“List 1”应该传递给右侧的 h2 元素；

到目前为止，这是我的代码；

<div class="container" id="table-and-list-names">
  <div class="row">
    <div class="col-3">
      <ul class="nav flex-column" id="list-names">
        <!--Names of Lists created by user will be here-->
      </ul>
    </div>

    <!--TABLE-->
    <div class="col-9">
      <h2 id="current-list-name">Select Todo List</h2>
      //...

创建按钮；

export function createButton(listName) {
    const listOfLists = document.querySelector('#list-names');
    const newList = document.createElement('li');
    const newListButton = document.createElement('button');
   
    newListButton.classList.add("btn", "btn-sm", "btn-outline-primary", "created-list");

    newListButton.innerText = listName;

    newList.appendChild(newListButton);
    listOfLists.appendChild(newList);
}

我尝试使用此代码传递文本值，但没有成功；

const currListName = document.querySelector('#current-list-name');

var buttons = document.getElementsByClassName('.created-list');
var buttonCount = buttons.length;

for (var i = 0; i <= length; ++i)
    buttons[i].onClick = function(e) {
        currListName.textContent = buttons[i].textContent;
    };

单击按钮时没有任何反应，浏览器控制台上没有错误。当我刷新页面时，我只得到一个错误，它说“Uncaught TypeError: can't access 属性 "onClick", buttons[i] is undefined”。我认为那是因为我刷新页面时没有按钮。有什么建议吗？

Answer 1

那么这个新的列表按钮应该如何知道必须做什么？你必须通过附加一个 eventListener 或创建一个 onclick 处理程序来告诉他。

将动态创建的按钮的文本内容传递给另一个元素

Passing a dynamically created button's text content to another element

javascript

html

dom

dom-manipulation