Css 在Node.js中设置动态创建的按钮

window.onload中的“const tcbutton=document.getElementsByClassName（“checkButton”）；”不是一个函数

我试图设置一组类名为“checkButton”的按钮，每次调用addRows（）函数时都会创建一个新的按钮

是否有更好的地方为按钮声明EventListener更好的地方

var bID = 0; 

//change if the task is completed or not. when marked as completed, the task will be removed.
function finishTask(e) {
  console.log("start finishing task");
  //Get the table row that is the parent's parent
  let tr = e.target.parentElement.parentElement;
  //Swap Completed or not
  if (tr.className === "Completed") {
    tr.className = "";
    e.target.innerHTML = "✓";
  } else {
    tr.className = "Completed";
    e.target.innerHTML = "✗";
  }
}

//send data to server
const submit = function(e) {
  console.log("start submit");
  // prevent default form action
  e.preventDefault();

  //Valid input?
  if (!validateInput()) {
    return false;
  }

  //const input = document.forms["inputForm"].getElementsByTagName("input");
  const input = document.querySelector("myinput");
  const gettask = document.querySelector("#youtask").value;
  const getdue = document.querySelector("#duedate").value;
  const json = { gettask, getdue };
  const body = JSON.stringify(json);
  fetch("/submit", {
    method: "POST",
    body
  })
    .then(response => response.json())
    .then(function(response) {
      addRows(response);
    });
  return false;
};
//Delete a row of task form the table and server
function deleteRows(e) {
  //fill in
}

//Handles the click action
const handleButton = function(e) {
  e.preventDefault();
  console.log("handle button");
  console.log(e);
  //Ignores if you click on anything but a button
  if (e.target.tagName === "BUTTON") {
    //Route the button press to the correct function
    if (e.target.id === "myinput") {
      console.log("myinput: submit");
      submit(e);
    } else if (e.target.className === "checkButton") {
      console.log("0button: finish task");
      finishTask(e);
    } else if (e.target.id === "deleteb") {
      console.log("deleteb: delete row");
      deleteRows(e);
    } 
  } 
  return false;
};

//Takes a json object and adds it to the table as a row
function addRows(jsonEntry) {
  console.log("addrows", jsonEntry);
  //Find the table
  const tableBody = document.getElementById("TaskBody");
  //Insert a new cell and row
  let row = tableBody.insertRow(-1);
  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  let cell3 = row.insertCell(2);
  let cell4 = row.insertCell(3);

  //Fill those cells with server info.
  cell1.innerHTML = jsonEntry.Task;
  cell2.innerHTML = jsonEntry.Date;
  cell3.innerHTML = jsonEntry.mdate;
  cell4.innerHTML = '<button class="checkButton">✗</button>';
}

//Validates the input
function validateInput() {
  console.log("validateInput");
  const inputTask = document.getElementById("youtask").value;
  console.log(inputTask);
  const inputdd = document.getElementById("duedate").value;
  console.log(inputdd); // confirm if date?
  return true;
}

window.onload = function() {
  const submitbutton = document.getElementById("myinput");
  submitbutton.addEventListener("click", handleButton, false);
  
  const deletebutton = document.getElementById("deleteb");
  deletebutton.addEventListener("click", handleButton, false);
  
  const tcbutton = document.getElementsByClassName("checkButton");
  tcbutton.addEventListener("click", handleButton, false);
  

var-bID=0；
//更改任务是否已完成。当标记为已完成时，任务将被删除。
功能完成任务（e）{
console.log（“开始完成任务”）；
//获取作为父级的父级的表行
设tr=e.target.parentElement.parentElement；
//交换是否完成
如果（tr.className==“已完成”）{
tr.className=“”；
e、 target.innerHTML=”✓";
}否则{
tr.className=“已完成”；
e、 target.innerHTML=”✗";
}
}
//向服务器发送数据
const submit=函数（e）{
控制台日志（“开始提交”）；
//防止默认窗体操作
e、 预防默认值（）；
//有效输入？
如果（！validateInput（））{
返回false；
}
//常量输入=document.forms[“inputForm”].getElementsByTagName（“输入”）；
const input=document.querySelector（“myinput”）；
const gettask=document.querySelector（“#youtask”）.value；
const getdue=document.querySelector（“#duedate”）.value；
const json={gettask，getdue}；
const body=JSON.stringify（JSON）；
获取（“/submit”{
方法：“张贴”，
身体
})
.then（response=>response.json（））
.然后（功能（响应）{
addRows（响应）；
});
返回false；
};
//从表和服务器中删除一行任务
函数deleteRows（e）{
//填补
}
//处理单击操作
常量把手按钮=功能（e）{
e、 预防默认值（）；
控制台日志（“手柄按钮”）；
控制台日志（e）；
//如果单击按钮以外的任何对象，则忽略该选项
如果（e.target.tagName==“按钮”）{
//将按钮按至正确的功能
如果（e.target.id==“myinput”）{
日志（“myinput:submit”）；
提交（e）；
}else if（e.target.className==“checkButton”）{
console.log（“0按钮：完成任务”）；
完成任务（e）；
}else if（e.target.id==“deleteb”）{
log（“deleteb:delete行”）；
删除行（e）；
} 
} 
返回false；
};
//获取json对象并将其作为行添加到表中
函数addRows（jsonetry）{
log（“addrows”，jsonetry）；
//找到桌子
const tableBody=document.getElementById（“任务体”）；
//插入新的单元格和行
let row=tableBody.insertRow（-1）；
设cell1=row.insertCell（0）；
设cell2=row.insertCell（1）；
设cell3=row.insertCell（2）；
设cell4=row.insertCell（3）；
//用服务器信息填充这些单元格。
cell1.innerHTML=jsonEntry.Task；
cell2.innerHTML=jsonEntry.Date；
cell3.innerHTML=jsonEntry.mdate；
cell4.innerHTML文件✗';
}
//验证输入
函数validateInput（）{
console.log（“validateInput”）；
const inputTask=document.getElementById（“youtTask”）.value；
控制台日志（输入任务）；
const inputdd=document.getElementById（“duedate”）.value；
console.log（inputdd）；//是否确认日期？
返回true；
}
window.onload=函数（）{
const submitbutton=document.getElementById（“myinput”）；
submitbutton.addEventListener（“单击”，把手按钮，错误）；
constDeleteButton=document.getElementById（“deleteb”）；
deletebutton.addEventListener（“单击”，把手按钮，错误）；
const tcbutton=document.getElementsByClassName（“checkButton”）；
tcbutton.addEventListener（“单击”，把手按钮，错误）；

}