Javascript Button onclick事件在表数据的innerHTML中不起作用，同时使用按钮从本地存储中删除数据

我正在开发一个本地存储crud操作。我用一个表存储了数据。它工作得非常好。在操作中，删除按钮设置为删除本地存储器的键值。按钮onclick与其他功能一起工作。但不使用函数cleardata。
访问fiddle查看代码

表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
用户名：

用户编号：

用户地址：


用户名
用户号码
用户地址
行动

这是js代码

function doFirst(){
    var button = document.getElementById('button');
    button.addEventListener("click",save,false);
    display();
}
function save(){
    var key = document.getElementById("key").value;
    var value = document.getElementById("value").value;
    var data = document.getElementById("data").value;
    var obj=[
        value,data
    ];
    localStorage.setItem(key, JSON.stringify(obj));
    display();
    key.value="";
    value.value="";
    data.value="";
}
function display(){
    var display_data = document.getElementById("display_data");


    for(var i = 0; i <localStorage.length; i++){
        var a = localStorage.key(i);
        var b = JSON.parse(localStorage.getItem(a));        
        console.log(a);
        display_data.innerHTML +="<tr><td>"+a+"</td><td>"+b[0]+"</td><td>"+b[1]+"</td><td><button onclick='cleardata("+a+")' type='button'>Delete</button></td></tr>";

        } 

    }
function cleardata(data){
    console.log(data);

    localStorage.removeItem(data);
    location.reload();
}

window.addEventListener("load",doFirst,false)

函数doFirst（）{
var button=document.getElementById（'button'）；
按钮。addEventListener（“单击”，保存，错误）；
显示（）；
}
函数save（）{
var key=document.getElementById（“key”）.value；
var value=document.getElementById（“value”）.value；
var data=document.getElementById（“数据”）.value；
var obj=[
价值、数据
];
setItem（key，JSON.stringify（obj））；
显示（）；
key.value=“”；
value.value=“”；
数据。值=”；
}
函数显示（）{
var display_data=document.getElementById（“display_data”）；
对于（var i=0；i您的代码几乎是正确的。
您的问题在这一行：

   display_data.innerHTML +="<tr><td>"+a+"</td><td>"+b[0]+"</td><td>"+b[1]+"</td><td><button onclick='cleardata("+a+")' type='button'>Delete</button></td></tr>";

此函数的行为将是：cleardata（var_name）。
您必须转义到精确，它是一个字符串而不是变量。如下所示：

display_data.innerHTML +="<tr><td>"+a+"</td><td>"+b[0]+"</td><td>"+b[1]+"</td><td><button onclick='cleardata(`"+a+"`)' type='button'>Delete</button></td></tr>";

display_data.innerHTML++=“a+”“+b[0]+”“+b[1]+“Delete”；

在我这方面效果很好。但是在控制台上，您的json解析仍然存在错误。
快速响应速度更快，但我在您的代码中看到了一些不好的做法，因此我想与您分享您应该采用的编码方式

第一件事是你要分离责任，那是什么？你应该创建只负责一件事的函数，这件事应该做得很好，所以你应该分离将用户保存到localStorage的逻辑，这是因为当你将所有用户加载到localStorage时，localStorage可以重用localStorage，这样您就可以以模块化的方式编写更少的代码

第二个
display
函数应该只关注行本身的显示，而不应该了解localStorage，即在第一次加载所有用户时重用相同的函数，在添加新用户/项目时使用相同的函数

因此，我花了一点时间制作了一个基于此原则的工作示例，
单一责任


//获取表的引用并保存按钮元素
const tableUsers=document.getElementById（'table-users'）；
const saveButton=document.getElementById（'button-save'）；
//声明一些常量
const deleteButonClassName='删除按钮'；
const storageNameSpace='users'；
//检查作为参数传递的元素是否为可删除按钮
函数isButtonDelete（目标）{
返回字符串（target.nodeName）.toLowerCase（）='button'&&target.classList.contains（deleteButtonClassName）；
}
//创建创建新用户时要附加的可删除按钮
函数createDeleteButton（文本）{
const button=document.createElement（'button'）；
button.classList.add（deleteButtonClassName）；
button.innerText=文本；
返回按钮；
}
//addNewUserRow函数只关心呈现新用户，这个函数不知道localStorage引擎，所以它是纯的
函数addNewUserRow（用户）{
const row=document.createElement（'tr'）；
const colName=document.createElement（'td'）；
colName.innerText=user.name；
const colNumber=document.createElement（'td'）；
colNumber.innerText=user.number；
const colAddress=document.createElement（'td'）；
colAddress.innerText=user.address；
const colAction=document.createElement（'td'）；
constdeletebutton=createDeleteButton（'Borrar'）；
deleteButton.dataset.id=user.id；
row.setAttribute（'id'，user.id）；
colAction.appendChild（deleteButton）；
[colName，colNumber，colAddress，colAction].forEach（（child）=>row.appendChild（child））；
tableUsers.appendChild（行）；
}
/*
此方法将附加到表元素上的onClick，因此我们将所有事件委托给表元素。
那你为什么要这样做呢？
只是为了避免为用户创建的每一行分配太多内存，因此您需要附加onClick=“yourFunctionName”对于在添加新用户时创建的每个按钮，当您这样做时，您将把一个句柄链接到该按钮的点击事件，因此，我们不是这样做，而是将所有事件委托给主父级（在本例中是table元素）。
*/
函数handleActions（事件）{
如果（isButtonDelete（event.target））{
返回deleteRow（事件）；
}
}
//将用户删除到localStorage中，然后将该行删除到表中
函数deleteRow（事件）{
const按钮=event.target；
const id=button.dataset.id；
如果（id）{
removeUserInStorage（id）；
document.getElementById（id.remove（）；
}
}
//此方法将关注从输入创建用户对象，然后清除每个输入
函数buildUserObject（输入）{
const user={id:Date.now（）}；
对于（变量i=0；icleardata("+a+")

display_data.innerHTML +="<tr><td>"+a+"</td><td>"+b[0]+"</td><td>"+b[1]+"</td><td><button onclick='cleardata(`"+a+"`)' type='button'>Delete</button></td></tr>";