Question

我正在制作待办事项应用程序。当我单击编辑按钮时，我想将项目ID和标题发送到editItem函数。我在弄清楚如何使用模板字符串传递给参数时遇到麻烦。当我只发送item.id时，它工作正常，但是当我添加第二个参数（item.title）时，我得到一个错误

<button onclick='data.editItem(${item.id}, ${item.title})'class="editItem">Edit</button>

完整代码

const data = new State()

data.mockData.map(item => {
    let markup =` <li  id="${item.id}"className={item.done ? 'done': 'hidden'}> ${item.title}
<button onclick='data.deleteItem(${item.id})'class="deleteItem" >Delete</button>
<button onclick='data.editItem(${item.id}${item.title})'class="editItem">Edit</button>
<button class="completeItem">Complete</button>
</li>
`
document.querySelector('ul').insertAdjacentHTML('beforeend', markup)

}）

Answer 1

我意识到这与您的方法稍有不同，但是类似的方法对您有用吗？

<li id="item1">
Item1 Title
  <button id="button1" onclick="handleClick(this.id)" class="editItem">
      Edit
  </button>
</li>

<script>
    function editItem(id, title) {
        console.log(id, title)
    }

    function handleClick(id) {
         let clickedButton = document.getElementById(id);
       let item1 = clickedButton.parentNode;
       editItem(item1.id, item1.firstChild.textContent);
    }

</script>

注意：我已经编辑了上面的代码，以进一步满足提问者的需求。

Answer 2

您可以尝试使用引号：

<button onclick='data.editItem(${item.id}, "${item.title}")'class="editItem">Edit</button>

Answer 3

我认为应该； <button onclick="editItem(item.id, item.title)" />

使用onclick

3 个答案: