将 onclick 事件与模板文字中具有多个参数的函数一起使用 [英] Using onclick event with a function with more than one argument in Template literals

问题描述

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

What is the correct way to write a function with more than one argument when using javascript post es6 template literals called by an onclick event?

我的代码:

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"会自动启动(无需单击按钮).(我不想要这种行为)

This way, the code is working but the function 'feedDb' is launched automatically (without clicking on the button). (i don't want this behaviour)

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

if i call the function feedDb like the following, it dosen't work and the entire app crash (nodeJs).:

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

我尝试了以下方法，但没有更多成功:

I tried the following but with no more success:

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

在这种情况下只定义了游戏年...当然它会返回一个错误.

Only the gameyear is defined in this case... and it return an error of course.

请在基于 JavaScript post ES6 中的模板文字的字符串中使用具有多个参数的函数时，正确的语法是什么?

What is the correct syntaxe when using a function with more than one argument inside a string based on template literals in JavaScript post ES6 please?

推荐答案

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

You are programmatically generating JavaScript embedded inside HTML.

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

Think about what the result is going to look like. Better yet, look at it. Don't just assign to resultImg.innerHTML. Store it in a variable and console.log it.

输出将如下所示:

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

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

You're outputting the values of the variables into the JavaScript where a URL will be treated as a syntax error, and a word will be treated as a variable name.

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

String literals need to be surrounded by quotes!

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

You have a second problem. <a> elements may not contain <button> elements (or vice versa). You aren't linking anywhere, don't use an <a>.

第三个:id 在文档中必须是唯一的.

And a third: An id must be unique within the document.

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

That said, the data might include characters with special meaning (like ", ' or &) which would break the generated result.

通过将字符串混合在一起来生成源代码通常非常危险(并且难以调试).

It's generally pretty dangerous (and hard to debug) to generate source code by mashing strings together.

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

Consider using DOM manipulation instead. It is more verbose but considerably safer.

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);
}

这篇关于将 onclick 事件与模板文字中具有多个参数的函数一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！