Javascript 使用参数创建按钮函数

我正在做一个简单的笔记应用程序。每个注释都有标题、正文和完整状态。我想创建它，这样如果一个注释没有完成，它会在注释下创建一个按钮。单击按钮后，它应将complete的布尔值更改为true，并重新填充列表

我遇到的问题是，如果标题中有空格，我会得到一个错误：

只有在标题中有空格（单击“家庭时间”）时才会发生这种情况。有人知道问题是什么吗？我尝试创建

note.title

作为变量，然后将其添加到中。我还尝试了

note.title.toString（）

，但没有成功。以下是函数：

function populateList(theList)
{
    let divList = document.querySelector('#ListDiv');
    divList.innerHTML = "";
    theList.forEach(function(note)
    {
        let element = document.createElement('p');
        let titleName = note.title.toLowerCase();
        element.innerHTML = `Title: ${note.title}<br>Body: ${note.body}<br>Completed:${note.completed}`;
        if(note.completed == false)
        {
            element.innerHTML += `<br><button onclick=completeNote("${note.title}")>Complete</button>`;
        }
        divList.appendChild(element);
    });
}

函数populateList（theList）
{
让divList=document.querySelector（“#ListDiv”）；
divList.innerHTML=“”；
列表forEach（函数（注释）
{
let element=document.createElement（'p'）；
让titleName=note.title.toLowerCase（）；
element.innerHTML=`Title:${note.Title}
Body:${note.Body}
Completed:${note.Completed}`；
如果（note.completed==false）
{
element.innerHTML+=`
Complete`；
}
divList.appendChild（元素）；
});
}

您应该向对象添加注释ID，当您单击按钮时，将ID传递给函数以查找节点并将其状态设置为“完成”

更改状态后，重新呈现列表

const注释=[
{id:1，标题：'早上'，正文：'起床'，完成：真}，
{id:2，标题：'Day'，正文：'Work'，完成：false}，
{id:3，标题：“晚上”，正文：“上床睡觉”，完成：false}
];
大众主义者（注）；
函数completentote（noteId）{
notes.find（note=>note.id==parseInt（noteId，10））.completed=true；
大众主义者（注）；
}
函数populateList（theList）{
const divList=document.querySelector（'#ListDiv'）；
divList.innerHTML=“”；
theList.forEach（注意=>{
let element=document.createElement（'p'）；
让titleName=note.title.toLowerCase（）；
element.innerHTML=`Title:${note.Title}
Body:${note.Body}
Completed:${note.Completed}`；
如果（note.completed==false）{
element.innerHTML+=`
Complete`；
}
divList.appendChild（元素）；
});
}

---

您应该向对象添加注释ID，当您单击按钮时，将ID传递给函数以查找节点并将其状态设置为“完成”

更改状态后，重新呈现列表

const注释=[
{id:1，标题：'早上'，正文：'起床'，完成：真}，
{id:2，标题：'Day'，正文：'Work'，完成：false}，
{id:3，标题：“晚上”，正文：“上床睡觉”，完成：false}
];
大众主义者（注）；
函数completentote（noteId）{
notes.find（note=>note.id==parseInt（noteId，10））.completed=true；
大众主义者（注）；
}
函数populateList（theList）{
const divList=document.querySelector（'#ListDiv'）；
divList.innerHTML=“”；
theList.forEach（注意=>{
let element=document.createElement（'p'）；
让titleName=note.title.toLowerCase（）；
element.innerHTML=`Title:${note.Title}
Body:${note.Body}
Completed:${note.Completed}`；
如果（note.completed==false）{
element.innerHTML+=`
Complete`；
}
divList.appendChild（元素）；
});
}

---

在这里，您可以使用encodeURIComponent和decodeURIComponent，如下所示：

function populateList(theList)
{
    let divList = document.querySelector('#ListDiv');
    divList.innerHTML = "";

    theList.forEach(function(note)
    {
        let element = document.createElement('p');
        let titleName = note.title.toLowerCase();
        element.innerHTML = `Title: ${note.title}<br>Body: ${note.body}<br>Completed:${note.completed}`;
        if(note.completed == false)
        {
            element.innerHTML += "<br><button onclick=completeNote('" + encodeURIComponent(note.title) + "')>Complete</button>";
        }
        divList.appendChild(element);
    });
}

function completeNote(title){
    theList.forEach(x=>{if(x.title == decodeURIComponent(title)){x.completed =true}});
    populateList(theList);
}

函数populateList（theList）
{
让divList=document.querySelector（“#ListDiv”）；
divList.innerHTML=“”；
列表forEach（函数（注释）
{
let element=document.createElement（'p'）；
让titleName=note.title.toLowerCase（）；
element.innerHTML=`Title:${note.Title}
Body:${note.Body}
Completed:${note.Completed}`；
如果（note.completed==false）
{
element.innerHTML+=“
完成”；
}
divList.appendChild（元素）；
});
}
功能完成（标题）{
forEach（x=>{if（x.title==decodeURIComponent（title））{x.completed=true}）；
大众主义者（theList）；
}

在这里，您可以使用encodeURIComponent和decodeURIComponent，如下所示：

function populateList(theList)
{
    let divList = document.querySelector('#ListDiv');
    divList.innerHTML = "";

    theList.forEach(function(note)
    {
        let element = document.createElement('p');
        let titleName = note.title.toLowerCase();
        element.innerHTML = `Title: ${note.title}<br>Body: ${note.body}<br>Completed:${note.completed}`;
        if(note.completed == false)
        {
            element.innerHTML += "<br><button onclick=completeNote('" + encodeURIComponent(note.title) + "')>Complete</button>";
        }
        divList.appendChild(element);
    });
}

function completeNote(title){
    theList.forEach(x=>{if(x.title == decodeURIComponent(title)){x.completed =true}});
    populateList(theList);
}

函数populateList（theList）
{
让divList=document.querySelector（“#ListDiv”）；
divList.innerHTML=“”；
列表forEach（函数（注释）
{
let element=document.createElement（'p'）；
让titleName=note.title.toLowerCase（）；
element.innerHTML=`Title:${note.Title}
Body:${note.Body}
Completed:${note.Completed}`；
如果（note.completed==false）
{
element.innerHTML+=“
完成”；
}
divList.appendChild（元素）；
});
}
功能完成（标题）{
forEach（x=>{if（x.title==decodeURIComponent（title））{x.completed=true}）；
大众主义者（theList）；
}

这个语法是从哪里来的？我觉得很奇怪。index.html页面的第21行是什么？

element.innerHTML+=`
Complete`@GrumpyCrouton我在班上跟着一个学生。学会了使用``这样我就可以通过使用${}而不是使用+@Mr.polywhill直接添加javascript变量，我试着检查了一下，但它没有显示任何内容。可能是因为该行是通过javascript添加的@MiroslavGlamuzina我试过了，遗憾的是仍然是同样的问题。我试试下面Polywhill先生的答案，你可以打开调试器，跳转到抛出错误的代码行（aka#21）。您还可以在Chrome调试器中切换stop on异常，它将跳转到脚本中的行。您从何处获得此语法？我觉得很奇怪。index.html页面的第21行是什么？
element.innerHTML+=`
Complete`@GrumpyCrouton我在班上跟着一个学生。学会了使用``这样我就可以通过使用${}而不是使用+@Mr.polywhill直接添加javascript变量，我试着检查了一下，但它没有显示任何内容。可能是因为线路是广告