Javascript 如何通过JS'将占位符附加到按钮；多姆？

我正试图找出如何将按钮“Delete”附加到每个列表元素，这样我就可以提前为其他列表元素创建更多按钮。但是，当我创建按钮时，它们显示时没有文本，只有文本附近的小矩形框。我想通过命令

”document.getElementByClassName进行修复[list_number+“_button]”。placeholder=“Delete”

，但我在尝试将类名附加到按钮时遇到了一个错误：

Uncaught TypeError: Cannot read property 'classList' of undefined
    at addButton (script.js:74)
    at script.js:82

但奇怪的是，此错误仅显示在[1]列表对象上，而不显示在[0]对象上。由于某种原因，[0]对象一切正常，尽管我没有成功地将名称附加到它上。我认为问题在于列表计数，因为第一个按钮实际上是“发送”，但当我将

var list_number=0

的值从0更改为1时，它只会变得更糟，并立即给出一个错误

如何在按钮中附加文本，使其看起来正常

注意：与按钮相关的命令位于末尾，前面的所有命令都是将新元素添加到列表中的命令，用于输入并使元素对齐

代码

var-button=document.getElementById（“按钮”）；
var modify_list=document.getElementById（“用户输入”）；
var ul=文件查询选择器（“ul”）；
var li=document.queryselectoral（“li”）；
var all_buttons=document.queryselectoral（“按钮”）；
var i=0；//将类附加到li
而（li.length>i）{
李[i].类列表.add（i）；
li[i].classList.add（'done'）；
li[i].classList.add（'cursor'）；
我++
}
//通过函数切换行（稍后我们将校准在单击列表元素时再次切换的函数）。
var n=0
而（li.length>n）{
li[n].classList.toggle（“完成”）；
n++
}
//命令将新元素添加到列表中，并在单击时划线。
函数inputLength（）{
返回modify_list.value.length；
}
函数addToTheList（）{
var li=document.createElement（“li”）；
li.appendChild（document.createTextNode（modify_list.value））；
ul.儿童（li）；
修改_list.value=''；
}
函数addAfterClick（）{
如果（inputLength（）==0）{
警告（“请不要输入空列表”）；
}否则{
addToTheList（）；
}
}
函数addAfterEnter（键）{
如果（key.keyCode==13&&inputLength（）>0）{
addToTheList（）；
}
}
按钮。添加EventListener（“单击”，添加后单击）；
修改_list.addEventListener（“按键”，addAfterEnter）；
功能切换（数字）{
li[number].classList.toggle（“完成”）；
}
ul.添加的监听器（“点击”，当点击时）；
单击时的函数（事件）{
var li_number=event.target.className[0]；
//在JS中，在某些情况下，它是字符串还是数字并不重要，我支持。
//变量li_编号=编号（li_编号字符串）；
//控制台日志（LIU编号）；
切换（li_编号）；
}
//创建按钮及其功能
功能添加按钮（列表编号）{
var button=document.createElement（“按钮”）；
li[列表\编号].appendChild（按钮）；//在相应的li对象附近追加按钮
所有按钮[列表编号].classList.add（列表编号+“\u按钮”）//为按钮创建类
log（所有按钮[列表编号].classList）；
//document.getElementByClassName[列表编号+“\u按钮]。placeholder=“删除”
}
var list_number=0//因为在编号0下有“发送”按钮
while（li.length>列表编号）{
添加按钮（列表编号）；
列表_编号++；
}
//console.log（列表编号）；

。完成{
颜色：红色；
文字装饰：线条贯通；
}
.光标{
光标：指针；
}

多姆
到夏末我有什么计划？
它们是：

发送

学德语
学日语
学习Java脚本
体育活动

要在编程生成的HTMLButtoneElement上显示的文本可以使用它的.innerText属性进行设置。.placeholder属性有不同的用途

让我们仔细看看您的addButton功能：

function addButton(list_number){
    var button = document.createElement("button");
    li[list_number].appendChild(button); //append button near the respective li objects
    all_buttons[list_number].classList.add(list_number + "_button") //create class for the button
    console.log(all_buttons[list_number].classList);
    // document.getElementByClassName[list_number + "_button"].placeholder = "Delete"
}

前两行没问题。麻烦从这里开始：

all_buttons[list_number].classList.add(list_number + "_button");

所有按钮是在开始向DOM添加动态生成的按钮元素之前初始化的按钮的HTML集合，因此它只包含通过HTML设置的按钮。这意味着此数组已过时，需要在每次添加或删除按钮时更新

此外，如果您想要操作新生成的按钮的属性，您根本不需要使用该数组-您可以使用变量button直接访问它。我还建议为这些按钮提供唯一的id，以便您以后可以引用它们并为其提供一个单击事件侦听器。此外，由于re已经是一个名为button的全局变量。您应该为函数中的变量指定一个不同的名称，例如localButton

下面是一个例子：

var-button=document.getElementById（“按钮”）；
var modify_list=document.getElementById（“用户输入”）；
var ul=文件查询选择器（“ul”）；
var li=document.queryselectoral（“li”）；
var all_buttons=document.queryselectoral（“按钮”）；
var i=0；//将类附加到li
而（li.length>i）{
李[i].类列表.add（i）；
li[i].classList.add（'done'）；
li[i].classList.add（'cursor'）；
我++
}
//通过函数切换行（稍后我们将校准在单击列表元素时再次切换的函数）。
var n=0；
而（li.length>n）{
li[n].classList.toggle（“完成”）；
n++；
}
//命令将新元素添加到列表中，并在单击时划线。
函数inputLength（）{
返回modify_list.value.length；
}
函数addToTheList（）{
var li=document.createElement（“li”）；
li.appendChild（document.createTextNode（modify_list.value））；
ul.儿童（li）；
修改_list.value=''；
}
函数addAfterC