How to use function in another public js file

Question

I originally had the following code commands for simplicity I put it just below the body in the html file. This is my code:

<script>
async function ThemMonHoc() {
    MyPopUpPost('Thêm môn học','/ThemMonHoc')
}
async function SuaTen() {
    MyPopUpPost('Sửa tên môn học','/SuaTenMonHoc')
}
async function MyPopUpPost(title,route) {
    var a = await Swal.fire({
        title: title,
        html: '<input id="Result" class="swal2-input" type="text"></input>',
        showDenyButton: true,
    })
    var value = $('#Result').val()
    if (a.isConfirmed) $.post(route,{a:value})
}
</script>

It seems that the function MyPopUpPost will be reused many times in other html files and leaving the code here will not be very neat. So, I put it in another file.

This is my code in UtilitiesForm.js:

        export async function MyPopUpPost(title, route) {
        var a = await Swal.fire({
            title: title,
            html: '<input id="Result" class="swal2-input" type="text"></input>',
            showDenyButton: true,
        })
        var value = $('#Result').val()
        if (a.isConfirmed) $.post(route, {
            a: value
        })
    }

And back to the html file I try import or require to use that function but it is not working:

      <script>
        import {MyPopUpPost} from '/js/UtilitiesForm.js'
        async function ThemMonHoc() {
            MyPopUpPost('Thêm môn học','/ThemMonHoc')
        }
        async function SuaTen() {
            MyPopUpPost('Sửa tên môn học','/SuaTenMonHoc')
        }
    </script>

Is there a way to redo the work between public JS files?

Roozbeh · Accepted Answer · 2021-12-17 05:40:08Z

1

You have two options,

You can import your file into the HTML by using the script's src attribute.

Check this out: https://www.w3schools.com/tags/att_script_src.asp

Then, Change your script to the following and you should be ok:

<script src='/js/UtilitiesForm.js'></script>
<script>
    async function ThemMonHoc() {
        MyPopUpPost('Thêm môn học','/ThemMonHoc')
    }
    async function SuaTen() {
        MyPopUpPost('Sửa tên môn học','/SuaTenMonHoc')
    }
</script>

add type="module" to your script. Check this out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type

answered Dec 17, 2021 at 5:40

Roozbeh

4713 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Apoorva Chikara · Accepted Answer · 2021-12-17 05:32:01Z

1

It seems you are doing it correct, just mention the type in script tag, make sure your path is correct to the JS file.

<script type="module">
        import {MyPopUpPost} from '/js/UtilitiesForm.js'
        async function ThemMonHoc() {
            MyPopUpPost('Thêm môn học','/ThemMonHoc')
        }
        async function SuaTen() {
            MyPopUpPost('Sửa tên môn học','/SuaTenMonHoc')
        }
    </script>

I recommend you checking this link, how to import files in HTML.

answered Dec 17, 2021 at 5:32

Apoorva Chikara

8,8033 gold badges24 silver badges39 bronze badges

1 Comment

Quốc Thiệu Over a year ago

thanks for your help, i will try it right away ^^

1j01 · Accepted Answer · 2021-12-17 05:33:03Z

1

If you want to use ES6 modules, you need type="module" on your <script> tag.

If you look in your browser's Console, it should probably tell you something to that effect.

But if you don't use ES6 modules, it will actually be simpler; things will be global by default and you don't need any import/export statements, you just include the utilities as a <script> before the main <script> code.

It's up to you which style to use; ES6 modules are cleaner, but require more management.

answered Dec 17, 2021 at 5:33

1j01

4,2983 gold badges32 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to use function in another public js file

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related