执行以下代码时，在 JS 中出现错误：“未捕获的语法错误：在参数列表后丢失）”

Question

I'm getting the :"Uncaught SyntaxError: missing ) after argument list" while calling the delete function inside the creteHtmlview function.在 creteHtmlview 函数中调用 delete 函数时，我收到了：“Uncaught SyntaxError: missing ) after argument list”。

            console.log("Delete Item is being called")
            
        }
        //View layers

        function createHtmlListView ( { amount,SpentDate,desc} ) {
            //console.log(SpentDate.valueOf())
            return `
                    <li class="list-group-item d-flex justify-content-between">
                        <div class="d-flex flex-column">
                            ${desc}
                            <small class="text-muted">${SpentDate}</small>
                        </div>
                        <div>
                            <span class="px-5">
                                ${amount}
                            </span>
                            <button 
                                id="deleteOnClick"
                                type="button" 
                                class="btn btn-outline-danger btn-sm"
                                onclick="deleteItem(${SpentDate})"
                                >
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    </li>`

           }```

Answer 1

假设SpentDate是一个字符串，它需要被引用。

   onclick="deleteItem('${SpentDate}')"

Answer 2

Is this what you are looking for?这是你想要的？

I have injected the Html you are creating in js file into a div.main just to verify the Delete button is working.我已将您在 js 文件中创建的 Html 注入div.main以验证“删除”按钮是否正常工作。 On click see console.点击查看控制台。

Also I have included bootstrap.css.我也包含了 bootstrap.css。 Remove it if you dont want.如果你不想要，请删除它。

Working Code工作代码

 function createHtmlListView({ amount, SpentDate, desc }) { return ` <li class="list-group-item d-flex justify-content-between"> <div class="d-flex flex-column"> ${desc} <small class="text-muted">${SpentDate}</small> </div> <div> <span class="px-5"> ${amount} </span> <button id="deleteOnClick" type="button" class="btn btn-outline-danger btn-sm" onclick="deleteItem('${SpentDate}')" >Delete <i class="fas fa-trash-alt"></i> </button> </div> </li>` }; function deleteItem(date) { console.log(`Deleting item with date : ${date}`); } document.getElementById('main').innerHTML = createHtmlListView({ amount: '$100', SpentDate: '26 Sept 2020', desc: "Product Description" });

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="main" id="main"> </div> </body> </html>

Answer 3

You should remove three backtick characters (`) on the last line of code您应该删除最后一行代码中的三个反引号字符 (`)

Code should be look like this代码应该是这样的

function createHtmlListView({ amount, SpentDate, desc }) {
  //console.log(SpentDate.valueOf())
  return `
          <li class="list-group-item d-flex justify-content-between">
              <div class="d-flex flex-column">
                  ${desc}
                  <small class="text-muted">${SpentDate}</small>
              </div>
              <div>
                  <span class="px-5">
                      ${amount}
                  </span>
                  <button 
                      id="deleteOnClick"
                      type="button" 
                      class="btn btn-outline-danger btn-sm"
                      onclick="deleteItem(${SpentDate})"
                      >
                      <i class="fas fa-trash-alt"></i>
                  </button>
              </div>
          </li>`;
}

执行以下代码时，在 JS 中出现错误：“未捕获的语法错误：在参数列表后丢失）”

问题描述

3 个解决方案

解决方案1
1 2020-09-26 13:00:25

解决方案2
0 2020-09-26 13:43:54

解决方案3
-1 2020-09-26 12:57:50

执行以下代码时，在 JS 中出现错误：“未捕获的语法错误：在参数列表后丢失）”

问题描述

3 个解决方案

解决方案1 1 2020-09-26 13:00:25

解决方案2 0 2020-09-26 13:43:54

解决方案3 -1 2020-09-26 12:57:50

解决方案1
1 2020-09-26 13:00:25

解决方案2
0 2020-09-26 13:43:54

解决方案3
-1 2020-09-26 12:57:50