Использование события onclick с функцией с более чем одним аргументом в литералах шаблона

Question

Как правильно написать функцию с более чем одним аргументом при использовании javascript post литералов шаблона es6, вызываемых событием onclick?

мой код:

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, как показано ниже, она не работает и все приложение cra sh (nodeJs) .:

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

Я попробовал следующее, но безуспешно:

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

В этом случае определяется только год игры ... и, конечно, он возвращает ошибку.

Что такое правильный синтаксис при использовании функции с более чем одним аргументом внутри строки на основе литералов шаблона в JavaScript post ES6, пожалуйста?

Answer 1

в первую очередь спасибо!

из-за вас, @Quentin, я улучшил не только мой код и мои знания, но я буду больше учитывать использование console.log при генерации JavaScript встроенный в HTML.

моей первой попыткой было зарегистрировать мой рабочий код, и я увидел это странное поведение (и что feedDb возвращает некоторый неопределенный код (даже если код был выполнен автоматически) !!

результат console.log (result.Img.inner HTML):

<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.inner HTML), я смог увидеть то, чего не видел раньше во многих моих тестах: одна из моих переменных содержит полный текст с предложениями, разделенными запятой, и при передаче в функцию feedDb () каждый новый запятый из этого предложения интерпретируется так, как будто я посылаю новую переменную в список аргументов. Это выдаваемые ошибки.

В данный момент я вышел на пенсию переменная, содержащая полный текст, я должен искать, как я могу избежать этих разделенных запятыми предложений, чтобы теперь иметь возможность передавать его в мою функцию.

мой код хорошо выполняется только тогда, когда я нажимаю на свою кнопку и могу точно видеть, что происходит и что я посылаю в функцию feedDb ()! спасибо

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

Answer 2

Это уже сделано.

, но я пересылаю вам здесь правильный синтаксис:

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

мы должны окружать переменные, как в моем примере, это правильный синтаксис!

надеюсь, это поможет!

Answer 3

Вы программно генерируете JavaScript, встроенный в HTML.

Подумайте, как будет выглядеть результат. А еще лучше, , посмотрите . Не просто присваивайте resultImg.innerHTML. Сохраните его в переменной и console.log it.

Результат будет выглядеть примерно так:

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