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

sirbozc5  于 2023-05-17  发布在  Node.js
关注(0)|答案(3)|浏览(160)

当使用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})">

在这种情况下只有游戏年被定义。。它当然返回一个错误。
在JavaScript post ES6中,当使用一个基于模板文字的字符串中有多个参数的函数时,正确的语法是什么?

9lowa7mx

9lowa7mx1#

您正在以编程方式生成嵌入在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);
}
h5qlskok

h5qlskok2#

已经做好了
但我在这里重新发送你什么是正确的语法:

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

我们必须像在我的例子中一样包围变量,这是正确的语法!
我希望,它帮助!

vshtjzan

vshtjzan3#

首先谢谢你!
因为你@Quentin,我不仅提高了我的代码和知识,而且当我生成嵌入在HTML中的JavaScript时,我会更多地考虑使用console.log。
我的第一次尝试是记录我的工作代码,我看到了奇怪的行为(以及feedDb返回一些未定义的代码(即使代码是自动执行的)!!
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>

相关问题