1

I know that using a function or a variable by file1 from file2 can't work:

<head>
<script src="file1.js"></script>
<script src="file2.js"></script>
</head>

Because file2 is 1 line lower than file2, is there something that can make it possible? I don't want to use all of js script in one file or in html file because it would be a mess is there something i can do so it will work

I tried swapping file1 and file2 but it still gave me errors about functions and values being null and i don't know what to do

ethry
  • 731
  • 6
  • 17
farciarz funny
  • 13
  • 7
  • 1
    All scripts share the same global scope. If some definition is not in global scope, then it’s not accessible from outside. That being said, have you tried using [modules](//developer.mozilla.org/en/docs/Web/JavaScript/Guide/Modules) instead? – Sebastian Simon Nov 24 '22 at 18:27
  • 1
    Your script tags are wrong. It should be `src="file1.js"` and `src="file2.js"`. – MrDiamond Nov 24 '22 at 18:28
  • The point is that taken separately they are not supposed to depend on each other if there’s nothing making it explicit but when run together in the same context because bound as resources from the web page, that code will work because as said above in Javascript it’s a matter of scope at runtime. Anyway in terms of clear dependencies, it would be a bad choice to write things tightly coupled in separate files. That’s unless you use modules that make dependency explicit by packaging code. What I said here isn’t the Bible ofc. Take jquery for example. Your code may depend on it just make it expl – Diego D Nov 24 '22 at 18:33

1 Answers1

1

You don't "use" them in your HTML. you need to import one of them to the other, then you will have access to the other's values. for more information please follow the Link.

just a side note regarding your code. A. your script tags are wrong (should be <script src="file1"></script>) B. it's better to put your scripts at the bottom of your body element.

Daniel Benisti
  • 112
  • 2
  • 12
  • _“it's better to put your scripts at the bottom of your body element”_ — That’s some old practice to guarantee that the DOM is ready before any script runs and to avoid blocking the HTML parser. Modules or scripts with the `defer` or `async` attribute solve both of these problems much better. – Sebastian Simon Nov 24 '22 at 18:33
  • I agree but i don't think that the objective of the question... – Daniel Benisti Nov 24 '22 at 18:35
  • Can is export functions and variables at the same time? And if a exported variable is changed and gets imported is it still changed? – farciarz funny Nov 24 '22 at 18:40
  • @farciarzfunny You can have as many `export` statements as you want and export what you want. A module is identified by its module specifier (e.g. its URL); as long as you use the same specifier, a module will only be executed once. If you export a variable referencing an object, then yes, changing it anywhere will cause the object to change, and these changes will be reflected everywhere (there’s only one object since a module is only executed once). – Sebastian Simon Nov 24 '22 at 18:47
  • @SebastianSimon can i import something from a js file into html file using – farciarz funny Nov 24 '22 at 19:09
  • @farciarzfunny Yes. The guide on using modules, linked above, shows how to do this. – Sebastian Simon Nov 24 '22 at 19:12
  • @SebastianSimon i did everything but function isn't defined im trying to execute it though div onclick is there a problem with onclick – farciarz funny Nov 24 '22 at 19:52
  • @farciarzfunny Yes, there is a problem with `onclick`; see [ES6 Modules: Undefined onclick function after import](/q/44590393/4642212). Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Nov 24 '22 at 20:19
  • @SebastianSimon is there no problem with addEventListener in a js file? – farciarz funny Nov 24 '22 at 20:44
  • @farciarzfunny As long as `addEventListener` can have access to the correct scope, no, there is no problem. – Sebastian Simon Nov 24 '22 at 20:45
  • @SebastianSimon ok it works now i know more important things about JavaScript and HTML – farciarz funny Nov 24 '22 at 21:11