Add Custom JS to my custom module frontend

[asd_asd46]

i have created my custom module in that a particular .phtml file i want to apply my custom JS

please suggest as soon as possible

[Bhanu Periwal]

Hi @asd_asd46 

If you want to add js with phtml file then you can consider below code and add with phtml file

    <script>
        require(['jquery', 'myscript'], function($, myscript) {
         cosole.log("testing");
        });
    </script>

Or you can refer below link :
https://magento.stackexchange.com/questions/301627/magento-2-how-to-include-custom-js-file-in-phtml-...

If issue resolve, please click on 'Kudos' & Accept as Solution!

[smita_kagwade]

Hello @asd_asd46 ,

please consider the following solution to add js in .phtml file,

Magento's frontend app engine searches for all script tags with 

 type =text/x-magento-init

and uses the contents of it to call out certain jQuery widgets on certain DOM elements.

<script type="text/x-magento-init">
{"*": {"Vendor_Module/main": {}}}
</script>

Vendor_Module/main refer to the JavaScript file in Vendor/Module/view/<area>/web/main.js folder.
An example of such a file:

require([
'jquery', 'SimpleMDE', 'HighlightJs'
], function($, SimpleMDE, HighlightJs) {$(function() {
// Your custom code here...
});});

You can refer below link for more,

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_init.html

Thank You

Problem Solved? Click on 'Kudos' & Accept as Solution!

[asd_asd46]

Thank you for valuable suggestion.Give sample code is working in my .phtml file

But i have 2 files

1) Jacker_scroller.js and 2) jquery.pagepepling.js

i want to include these both files in .phtml please suggest on this 

1) Jacker_scroller.js

! function() {

var e = $(".page-head.page-head--no-scroll-listen"), //hello

o = e.find(".call-to-action"),

n = $(".scroll-jacker__cassette").length - 1;

$(".scroll-jacker").pagepiling({

menu: null,

direction: "vertical",

scrollingSpeed: 700,

easing: "swing",

loopBottom: !1,

loopTop: !1,

css3: !0,

navigation: !1,

normalScrollElements: null,

normalScrollElementTouchThreshold: 7,

touchSensitivity: 7,

keyboardScrolling: !0,

sectionSelector: ".scroll-jacker__cassette",

animateAnchor: !1,

onLeave: function(a, l, t) {

"down" == t && a == n ? (e.removeClass("page-head--no-start-bg"), o.addClass("call-to-action--alt")) : "up" == t && a == n + 1 && (e.addClass("page-head--no-start-bg"), o.removeClass("call-to-action--alt")), "down" == t ? jQuery(".page-progress__item--index").animate({

width: 20 * a + "%"

}, 700) : "up" == t && jQuery(".page-progress__item--index").animate({

width: 20 * (a - 2) + "%"

}, 700)

},

afterRender: function() {

$(".hero__chevron-south").on("click", function() {

$.fn.pagepiling.moveSectionDown()

})

}

})

}();

[asd_asd46]

Thank you for valuable suggestion.Give sample code is working in my .phtml file

But i have 2 files

1) Jacker_scroller.js and 2) jquery.pagepepling.js

i want to include these both files in .phtml please suggest on this

[smita_kagwade]

Hello @asd_asd46 ,

Standard Syntax for type="text/x-magento-init" is 

<script type="text/x-magento-init">
{
    // components initialized on the element defined by selector
    "<element_selector>": {
        "<js_component1>": ...,
        "<js_component2>": ...
    },
    // components initialized without binding to an element
    "*": {
        "<js_component3>": ...
    }
}
</script>

please refer below link for the detailed info 

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_init.html

Problem solved? accept the solution and click kudos.