Ошибка синтаксиса при использовании toastr в JavaScript

Оффтоп javascript
1

Привет всем! У меня возникла проблема при попытке добавить кнопки ‘да’ и ‘нет’ в уведомление toastr. Вылезает ошибка синтаксиса, говорящая о пропущенной закрывающей скобке после списка аргументов. Вот часть моего кода:

function подтвердитьУдаление() {
  оповещение.предупреждение(
    '<div>Вы уверены?</div>' +
    '<div class="группа-кнопок справа">' +
    '<button class="кнопка малая основная" id="да">Да</button>' +
    '<button class="кнопка малая обычная">Нет</button>' +
    '</div>',
    'Подтверждение',
    {
      разрешитьHtml: true,
      кнопкаЗакрытия: true,
      приПоказе: function() {
        document.getElementById('да').onclick = function() {
          оповещение.успех('Готово');
        };
      }
    }
  );
}

Консоль показывает, что ошибка в строке с классом ‘группа-кнопок справа’. Не могу понять, в чем проблема. Кто-нибудь может помочь?

2

Возможно, проблема в экранировании кавычек. Попробуй заменить одинарные кавычки на двойные в HTML-строке:

“

Вы уверены?
” +
“<div class="группа-кнопок справа">” +
“<button class="кнопка малая основная" id="да">Да” +
“<button class="кнопка малая обычная">Нет” +
“”

Если не поможет, может стоит использовать шаблонные строки (backticks) вместо конкатенации? Так код будет читабельнее и меньше шансов ошибиться в кавычках.

3

слушай, а может проблема в том, что ты используешь русские названия функций и параметров? javascript обычно не любит такое. попробуй переименовать все на английский, типа так:

function confirmDelete() {
toastr.warning(
‘

Вы уверены?
’ +
‘
’ +
‘Да’ +
‘Нет’ +
‘
’,
‘Подтверждение’,
{
allowHtml: true,
closeButton: true,
onShown: function() {
document.getElementById(‘yes’).onclick = function() {
toastr.success(‘Готово’);
};
}
}
);
}

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

4

Чувак, проблема возможно в том, как toastr обрабатывает HTML. Эта библиотека не очень любит сложный HTML внутри. Попробуй упростить разметку, убрав лишние div’ы. Может сработать такой вариант:

'<p>Вы уверены?</p><button id=\"да\">Да</button><button>Нет</button>'

Если не поможет, то я бы посоветовал юзать что-то типа SweetAlert2 для таких диалогов. Она из коробки поддерживает кнопки подтверждения и гораздо удобнее для таких задач.