How can i add a custom javascript module to custom module?

Question

Hi this code is working perfect without magento.

 <script src="flipbook.js"></script>
 <script src="jquery.js"></script>
<script>
$('#side').FlipBook({
 pdf: 'sample.pdf',
 });
</script>

i added to flipbook.js to view/frontend/templates/web/js and added to layout

<script src="test_test::js/flipbook.js"/>

phtml

<div id="side></div> 
 <script>
require(['jquery'], function($){
 $('#side').FlipBook({
 pdf: 'sample.pdf',
 });
});
</script>

Can u explain why its not working? And how can i fix it?

• Prathap Gunasekaran: Is there any error in browser console?
• Ibrahim Aldar: yea, Uncaught TypeError: $(...).FlipBook is not a function at 17:992 at Object.execCb (require.js:1650) at Module.check (require.js:866) at Module.enable (require.js:1143) at Module.init (require.js:774) at require.js:1416

Answer 1

Try this,

<script>
 require(['jquery','FlipBook'], function($){
 $('#side').FlipBook({
 pdf: 'sample.pdf',
 });
 });
</script>

For more about the implementation custom javascript implementation

Hope this helps.