Как показать уведомление в верхнем правом углу за несколько секунд на клике глификон?

Question

Я успешно реализовал этот учебник уведомления Bootstrap с кнопками:

Учебник

Демо

Я хотел бы изменить небольшую вещь, вместо кнопки - глифик (от Font Awesome), по нажатию на который отображается уведомление об успехе.

Я думал сделать это с идентификатором в моем коде, например:

<i class=\"fas fa-cart-arrow-down\" id=\"panier\">

Полный код:

 echo "<h4 align=\"center\"> <a href=\"$softname?additem\"><i class=\"fas fa-cart-arrow-down\" id=\"panier\"></i> $a_photo_exp[0]</a></h4>";

Я попытался изменить несколько раз JavaScript безуспешно, и теперь это не работает:

function myFunction() {
  document.getElementById("panier").bootstrapGrowl('Added to cart',{
        type: 'success',
        delay: 2000,
        });
}

Мой JavaScript ограничен, не могли бы вы объяснить, пожалуйста, как это работает?

Answer 1

Кажется, вам нужно использовать jQuery, чтобы открыть уведомление, вы можете сделать что-то вроде этого, чтобы оно заработало:

PHP-код

Добавить event.preventDefault(), чтобы заблокировать перенаправление посленажав на ссылку.

 echo "<h4 align=\"center\"> <a href=\"$softname?additem\" onclick=\"event.preventDefault(); myFunction();\"><i class=\"fas fa-cart-arrow-down\" id=\"panier\"></i> $a_photo_exp[0]</a></h4>";

JS

function myFunction() {

  $.bootstrapGrowl('Added to cart',{
        type: 'success',
        delay: 2000,
  });
}