'Sweetalert 2 i cant make this library work

Here is the problem. Sorry for stupid question.
I read how to connect this library to my project.
I use vs-code.
First, i need to install npm in my project with command npm install sweetalert2 in vs-code terminal.

I did that.

Next i need to add reference to sweetalert2.min.js and sweetalert2.min.css in <head>. And call the function. 

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
})

I also make button with onclick function but this not work. I click button and nothing. No modal window.

Here is my code. Help to see my problem. Thank you!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap" rel="stylesheet">
  <script src="/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="/node_modules/sweetalert2/dist/sweetalert2.min.css">
  <script>
    function CBR_XML_Daily_Ru(rates) {
      function trend(current, previous) {
        if (current > previous) return ' ▲';
        if (current < previous) return ' ▼';
        return '';
      }

      var USDrate = rates.Valute.USD.Value.toFixed(4).replace('.', ',');
      var USD = document.getElementById('USD');
      USD.innerHTML = USD.innerHTML.replace('00,0000', USDrate);
      USD.innerHTML += trend(rates.Valute.USD.Value, rates.Valute.USD.Previous);

      var EURrate = rates.Valute.EUR.Value.toFixed(4).replace('.', ',');
      var EUR = document.getElementById('EUR');
      EUR.innerHTML = EUR.innerHTML.replace('00,0000', EURrate);
      EUR.innerHTML += trend(rates.Valute.EUR.Value, rates.Valute.EUR.Previous);
    }
  </script>
  <link rel="dns-prefetch" href="https://www.cbr-xml-daily.ru/">
  <script src="https://www.cbr-xml-daily.ru/daily_jsonp.js" async></script>


</head>

<body>
  <button onclick="functi()">Тест Sweetalert</button>
  <div class="container-message">
    <div class="mainInfo">
      <h1>Что день грядующий нам готовит ? Богатство или бедность? <span class="usd-color">&#36</span></h1>
      <div id="USD">Доллар США $ — 00,0000 руб.</div>
      <div id="EUR">Евро € — 00,0000 руб.</div>


    </div>
  </div>

  <script>
    function functi() {
      Swal.fire({
        title: 'Error!',
        text: 'Do you want to continue',
        icon: 'error',
        confirmButtonText: 'Cool'
      })
    }
  </script>
</body>

</html>

And also attach chrome-console log console

modal-dialogsweetalert2


Solution 1:[1]

So, i find solution.

I use cdn url from documentation <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>.
But this not work.
I change this url in head to <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
And it works!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexey Bubakov

Related Questions