Can I call a function from a file JavaScript from another file1.js?
Question
I searched through StackOverflow and I found this , but I can't seem to make it work in my JQuery project. Premise: When the function were all in one file the code just worked fine. I have to files: file1.js
export{hextorgb, randomColor, rgbtohex};
$(document).ready(function () {
function hextorgb(hex) {
var rgb = /^#{1}([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/i.exec(hex);
rgb[1] = parseInt(rgb[1], 16).toString(10);
rgb[2] = parseInt(rgb[2], 16).toString(10);
rgb[3] = parseInt(rgb[3], 16).toString(10);
return rgb;
}
function randomColor() {
var color = "#";
while (color.length < 7) {
color += Math.floor(Math.random() * 256).toString(16);
}
return color;
}
function rgbtohex(color) {
var hex = parseInt(color).toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
})
and this file2.js
import {hextorgb,randomColor, rgbtohex} from "./file1.js";
$(document).ready(function () {
function generateRandomCol() {
var rgb = randomColor();
var rgbarray = hextorgb(rgb);
output(rgbarray[1], rgbarray[2], rgbarray[3]); /*where output is another function defined in this file */
$("#redslider").val(rgbarray[1]);
$("#redoutput").val(rgbarray[1]);
$("#greenslider").val(rgbarray[2]);
$("#greenoutput").val(rgbarray[2]);
$("#blueslider").val(rgbarray[3]);
$("#blueoutput").val(rgbarray[3]);
}
$("#generaterandom").click(function () {
generateRandomCol();
})
$("body").keypress(function (e) {
if (e.keyCode == 32) {
generateRandomCol();
}
})
})
and I put those in the head of my HTML file:
<head>
<script src="../js/file1.js" type="module"></script>
<script src="../js/file2.js" type="module"></script>
</head>
I would like to use the functions in file1.js into file2.js (because I'll use them in other Javascript (JQuery) files. It should be fine with the export and import as far as I've read, but it doesn't work. The import in file2.js totally breaks my code, even the parts that work without the file1.js functions, so I think I might be doing something wrong there?
I really can't figure it out. Any help is really appreciated.
1 answers
solution1
0 2022-05-28 14:13:01
Fixed, thank you everyone. There were some errors.
- the one Lee Taylor kindly pointed out. There shouldn't have been $(document).ready(function () {}) in file1.js because it's a function and every function inside that can't be exported because they exist within the ready function.
- the missing "type=module" from the tag. from this answer
The import statement cannot be used in embedded scripts unless such script has a type="module".
- one function that was in file1.js was trying to call a function in file2.js, but I didn't import/export any function from file2.js.
Unfortunatly I updated my code gradually while I was trying to find the solution, so the code you see now it's working, but if someone has the same problem just try check these things!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.