将 onclick 事件与模板文字中具有多个参数的函数一起使用

Question

当使用由 onclick 事件调用的 javascript post es6 模板文字时，编写具有多个参数的函数的正确方法是什么？

我的代码：

function displayImg(imageUrl, gameName, gameSummary, gameYear, cardId) {
    cardId = cardId.toString();
    resultImg.innerHTML += `
        <a class='text-dark ml-2' ><button onclick="${feedDb(imageUrl,gameName,gameSummary,gameYear)}" id='front' type='button' class='btn btn-sm btn-outline-secondary'>Save</button></a>
        <a class='text-dark ml-2' ><button onclick="flipCard(${cardId})" id='front' type='button' class='btn btn-sm btn-outline-secondary'> + d'info</button></a>`
}

这样，代码可以运行，但功能 'feedDb' 会自动启动（无需单击按钮）。（我不想要这种行为）

如果我像下面这样调用函数 feedDb，它不起作用并且整个应用程序崩溃 (nodeJs)。：

<button onclick="feedDb(${imageUrl},${gameName},${gameSummary},${gameYear})">

我尝试了以下但没有成功：

<button onclick="feedDb(${imageUrl,gameName,gameSummary,gameYear})">

在这种情况下只定义了 gameyear...这 return 当然是一个错误。

请问，在 JavaScript post ES6 中，基于模板字面量在字符串中使用带有多个参数的函数时，正确的语法是什么？

Answer 1

您正在以编程方式生成嵌入在 HTML 中的 JavaScript。

想想结果会是什么样子。更好的是，看看。不要只分配给 resultImg.innerHTML。将其存储在一个变量中并console.log它。

输出将如下所示：

<button onclick="feedDb(http://example.com/,football,

您正在将变量的值输出到 JavaScript，其中 URL 将被视为语法错误，单词将被视为变量名。

字符串文字需要用引号括起来！

你还有第二个问题。 <a> 个元素可能不包含 <button> 个元素（反之亦然）。你没有链接到任何地方，不要使用 <a>.

第三个：id 在文档中必须唯一。

也就是说，数据可能包含具有特殊含义的字符（如 "、' 或 &），这会破坏生成的结果。

通过将字符串混合在一起生成源代码通常非常危险（并且难以调试）。

考虑改用 DOM 操作。它更冗长但更安全。

function displayImg(imageUrl, gameName, gameSummary, gameYear, cardId) {
        cardId = cardId.toString();

        const b1 = document.createElement("button");
        b1.classList.add("btn", "btn-sm",  "btn-outline-secondary");
        b1.type = "button";
        b1.id = "front";
        b1.textContent = "Save";
        b1.addEventListener("click", () => feedDb(imageUrl,gameName,gameSummary,gameYear));
        resultImg.appendChild(b1);

        const b2 = document.createElement("button");
        b2.classList.add("btn", "btn-sm",  "btn-outline-secondary");
        b2.type = "button";
        b2.id = "not-front"; 
        b2.textContent = "+ d'info";
        b2.addEventListener("click", () => flipCard(cardId));
        resultImg.appendChild(b2);
}

Answer 2

首先谢谢大家！

因为你@Quentin，我没有改进我的代码和我的知识，但是当我生成嵌入在 [=34= 中的 JavaScript 时，我会更多地考虑 console.log 的使用].

我的第一次尝试是记录我的工作代码，我看到了奇怪的行为（并且 feedDb return 一些未定义的代码（即使代码是自动执行的）！！

console.log(result.Img.innerHTML) 的结果：

<button onclick="**undefined**" id="add" type="button" class="btn btn-sm btn-outline-secondary">Save</button> <button onclick="flipCard(1)" id="front" type="button" class="btn btn-sm btn-outline-secondary"> + d'info</button>

其次，我试了一下，用如下引号将我的变量括起来：

        <button onclick="feedDb('${imageUrl}','${gameName}', '${gameSummary}', '${gameYear}')" id='add' type='button' class='btn btn-sm btn-outline-secondary'>Save</button></a>

并且因为我使用了 console.log(result.Img.innerHTML)，所以我能够看到我以前从许多测试中看不到的东西：我的一个变量包含带有逗号分隔句子的完整文本，并且当传递到函数 feedDb() 时，这个句子中的每个新逗号都被解释为我在我的参数列表中发送了一个新变量。这个错误。

目前，我已经停用了包含全文的变量，我必须搜索如何转义这些逗号分隔的句子，以便现在能够将其传递给我的函数。

只有当我点击我的按钮时，我的代码才能很好地执行，我可以准确地看到发生了什么以及我发送到 feedDb() 函数的内容！谢谢

        <button onclick="feedDb('${imageUrl}','${gameName}','${gameYear}')" id='add' type='button' class='btn btn-sm btn-outline-secondary'>Save</button></a>

Answer 3

已经完成了。

但我在这里重新向您发送正确的语法是什么：

resultImg.innerHTML = `
....
<button onclick="feedDb('${imageUrl}','${gameName}','${gameYear}')" id='add' type='button' class='btn btn-sm btn-outline-secondary'>Save</button></a>
....`

我们必须像在我的示例中那样包围变量，这是正确的语法！

希望对你有所帮助！

将 onclick 事件与模板文字中具有多个参数的函数一起使用

Using onclick event with a function with more than one argument in Template literals

javascript

node.js

templates

onclick

template-literals