How to correctly use <svg> tags with jquery in intellij?

So here I have CDN of both JQuery & jsbarcode -> jsbarcode info https://lindell.me/JsBarcode/ The output should show a barcode the the const "number" var.

  

    <!DOCTYPE html>
     <html lang="en" xmlns:th="http://www.thymeleaf.org"  >

    </head>
    <body >
  
    </div>

         <script>
            const number = '12345678';
            $(document).ready(function(){
                JsBarcode("#barcode", number, {
                    text: number.match(/.{1,4}/g).join("  "),
                    width: 2,
                    height: 50,
                    fontSize: 15,
                });
            });
        </script>

        <svg id="barcode"></svg>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>



    </body>



</html>

Solution

You need to add the script tags for your libraries before the code that uses them. They can go within the <head> tag. Your code snippet becomes the following:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</head>

<body>
<script>
  const number = '12345678';
  $(document).ready(function(){
      JsBarcode("#barcode", number, {
          text: number.match(/.{1,4}/g).join("  "),
          width: 2,
          height: 50,
          fontSize: 15,
      });
  });
</script>
<svg id="barcode"></svg>
</body>
</html>

(In the code snippet I provided I also cleaned up some errors in the HTML, like the </div> for a nonexistent div tag.)