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

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

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

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

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

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

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


node.js javascript templates onclick template-literals
person ginzu2000 ginzu    schedule 06.04.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

Подумайте о том, как будет выглядеть результат. А еще лучше посмотрите на него. Не просто назначайте 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);
}
person Quentin    schedule 06.04.2020
comment
Привет, Квентин, спасибо за ответ, я сделал ошибку, когда создавал эту тему, когда я создавал тему, я хотел бы показать разные попытки, которые я сделал, и поэтому у меня есть 2 одинаковых идентификатора (я) (я быстро скопировал строку чуть ниже той, где я вызываю функцию feedDb(). моя ошибка. И спасибо, что указали мне на тег ‹a› при использовании тега ‹button›. Я скопировал этот кусок кода где-то и адаптируйте его для моих нужд, так что другие люди, похоже, тоже используют этот странный синтаксис. - person ginzu2000 ginzu; 07.04.2020
comment
Я записал полную строку, содержащуюся в моем resultImg.innerHTML, и посмотрите, как она выглядит: flipCard(1) id=front type=button class=btn btn-sm btn-outline-secondary› + d'info‹/button›, (извините, я не знаю, как разместить следующий код в теге кода при ответе кто-то, нет вариантов, например, когда я создаю тему). в любом случае код выполняется, как я уже говорил! я не понимаю, что происходит. - person ginzu2000 ginzu; 07.04.2020

arrow_upward
0
arrow_downward

прежде всего спасибо!

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

моей первой попыткой было зарегистрировать мой рабочий код, и я увидел это странное поведение (и то, что 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>
person ginzu2000 ginzu    schedule 07.04.2020

arrow_upward
0
arrow_downward

Уже сделано.

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

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

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

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

person ginzu2000 ginzu    schedule 07.04.2020