How to Use External ".Js" Files

Using external javascript files in a .js file

Javascript doesn't have any implicit "include this other file" mechanisms, like css's @include. You just have to list your globals file before the logic file in the tags:

 <script type="text/javascript" src="globals.js" />
 <script type="text/javascript" src="logic.js" />

If guaranteeing that the globals are available before anything in the logic file fires up, you can do a slow polling loop to see if some particular variable is available before calling an init() or whatever function.

How to use external .js files

Code like this

 <html>
    <head>
          <script type="text/javascript" src="path/to/script.js"></script>
          <!--other script and also external css included over here-->
    </head>
    <body>
        <form>
            <select name="users" onChange="showUser(this.value)">
               <option value="1">Tom</option>
               <option value="2">Bob</option>
               <option value="3">Joe</option>
            </select>
        </form>
    </body>
    </html>

I hope it will help you....
thanks

How to add external JavaScript files in ReactJS

You can import all the scripts in the main HTML file.

If you want to import the script inside the react component, you can use the following options.

Option 1: Use plain Javascript and React custom hook

Create custom hook [useScript.js]

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;

Use

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');
  // rest of your component
}

Option 2: Use plain Javascript in ComponentDidMount

componentDidMount () {
  const script = document.createElement("script");
  script.src = url;
  script.async = true;
  document.body.appendChild(script);
}

Option 3: Use dangerouslySetInnerHTML

const codeStr = `
  <div>
     <script type="text/javascript"src="https:xxxx/jquery-3.3.1.min.js"></script> 
     <script type="text/javascript"src="https:xxx/microsurvey" defer="defer"></script>
     <div id="microsurvey" module="true" tab-info="tabname"></div>
     <script type="text/javascript"> voc_getsurvey(); </script>                  
  </div>
`

<div dangerouslySetInnerHTML={{ __html: codeStr }} />

HTML: using external .js file with import statements

Every script that uses the import / export syntax that is included in the DOM must have type="module" attribute.

If the inline script uses any functions from a module, then they also need to be imported first.

Note: avoid inline event listeners like oninput and add event listeners through JavaScript, as with modules the update function will no longer be a global value.

<script type="module">
  import { doubleIt } from "./src/Main.js";

  let input = document.getElementById("input");
  let output = document.getElementById("output");

  function update() {
    output.value = doubleIt(input.value);
  }

  input.addEventListener('input', update)
</script>

how to import external js file when using bootstrap?

Remove the include js from the head, <link> tag is used to include css files, <script> tag is used for js files.

After </nav>, where nav ends insert these two lines

<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/index.js"></script>

You are good to go

How to access objects in an external js file from another external js file

My first wonder is why you have your JS wrapped in a function like so. You can see here I've accessed "hello" from another script loaded after it's set - as it's set in the global space.

https://jsfiddle.net/sj7bp97c/

<script src="https://pastebin.mozilla.org/?dl=8907696">
</script>
<script src="https://pastebin.mozilla.org/?dl=8907697">
</script>

One script sets the value, the other prints it to console. Unless it's required for your Javascript to be surrounded by functions, I'm not sure why you're doing so.

How to use external js file?

1) Check typo $('m.btn')...
2) Put your scripts before closing body tag.
3) If you run your site locally - delete / before navbar.js in the path.
Navbar.js must be in the same directory with your index.html file.
This must help.

External Javascript files in nuxtjs

Solution - steps to follow:

Add base.css to static > css folder, and also add all of the js files to static > js folder and then reference everything in nuxt.config.js:

    link: [
      { rel: 'stylesheet', type: 'text/css', href: 'css/base.css' }
    ],
    script: [
      { src: 'js/imagesloaded.pkgd.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/TweenMax.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/demo.js', type: 'text/javascript', body: true, defer: true }
   ]

Add all of the images to static > img folder and edit the base.css in order to reference images in base.css - write (wherever the images are referenced (2 places)): url('../img/1.jpg')

In the Vue template, copy-paste the HTML as-is.

When it comes to referencing images in the Vue template you would simply do:

<div class="background" style="background-image: url(img/1.jpg)"></div>

That is it. It should work just fine.

I created a GitHub repository so you can have a look and see how I have done it.

You can also view it live on CodeSandbox.