How to use function in another public js file-CodePudding

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"  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"  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?

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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.