admin管理员组

文章数量:1410682

I have 2 files the first one is an HTML file the other one is a javascript file. What I was trying to do was define a variable on the javascript file and access it on the Html side. Is it possible? A rough code is attached below but it doesn't work I get favColor is not defined error. thanks in advance.

JS Side

const favColor = "red"

Html side

<script src="pathtojsfile"></script>

<p id="insertHere"></p>

<script>
document.getElementById("insertHere").innerHTML = favColor
</script>

I have 2 files the first one is an HTML file the other one is a javascript file. What I was trying to do was define a variable on the javascript file and access it on the Html side. Is it possible? A rough code is attached below but it doesn't work I get favColor is not defined error. thanks in advance.

JS Side

const favColor = "red"

Html side

<script src="pathtojsfile"></script>

<p id="insertHere"></p>

<script>
document.getElementById("insertHere").innerHTML = favColor
</script>
  • javascript
  • html
Share Improve this question asked Apr 27, 2021 at 14:56 anon20010813anon20010813 1551 silver badge9 bronze badges 1
  • 2 You shouldn’t do that and keep all the JS logic in js file. You can put your code surrounded with script tag in js file. – Rahul Kumar Commented Apr 27, 2021 at 15:01
Add a ment  | 

3 Answers 3

Reset to default 3

It is widely considered bad practice to work with global variables. To avoid it, you can make use of ECMAScript Modules, introduced back in 2015 with ES6/ES2015.

This allows your first Javascript, let's name it colors.module.js to export the variable:

export const favColor = 'red';

Then, in your script that needs to access this variable, you import it:

import { favColor } from '/path/to/js/modules/colors.module.js';

For that to work, you need your importing script to have type=module attribute, and the import must be done on top of your Javascript. The script you import from does not need to be included in the page.

Here's some helpful links to get you started with modules:

  • ES Modules Deep Dive
  • Javascript Modules on MDN
  • Flavio Copes' take on ES Modules

I've set up a tiny github repo demonstrating this very basic usage of an ES module.

If modules are not an option, e.g. because you must support IE 11, or your build stack doesn't support modules, here's an alternative pattern that works with a single namespace object you attach to the global object window:

// colors.module.js
window.projectNamespace = window.projectNamespace || {};
projectNamespace.colors = window.projectNamespace.colors || {};
projectNamespace.colors.favColor = 'red';

and in your page you access it from that name space:

document.getElementById("insertHere").innerHTML = window.projectNamespace.colors.favColor;

This way you have a single location to put all your globally accessible variables.

As the code is written in your example it should work fine. Just like my example here:

<script>
  const favColor = "red";
</script>

<p id="insertHere"></p>

<script>
  document.getElementById("insertHere").innerHTML = favColor;
</script>

But there can be a number of issues if the code is not like this. But the JavaScript code could just go in the same file. Try to separate the html from the JS like this (the code in the script element could be moved to it's own file):

<html>

<head>
  <script>
    const favColor = "red";

    document.addEventListener('DOMContentLoaded', e => {
      document.getElementById("insertHere").innerHTML = favColor;
    });
  </script>
</head>

<body>
  <p id="insertHere"></p>
</body>

</html>

Here I'm also adding the eventlistener for DOMContentLoaded, so that I'm sure that the document is loded into the DOM.

Where your variable is declared is not the problem per se, but rather the loading order of scripts. If you want to make sure external scripts are loaded before you execute yours, you can use the load event of window object. It will wait until all resources on your page are loaded though (images, css, etc.)...

const myvar = "Hey I'm loaded";
<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Document</title>
      <script>
          //console.log(myvar); //<- fails
          window.addEventListener('load', e => {
            document.querySelector('#insertHere').innerHTML = myvar;
          });
      </script>
  </head>
  <body>
    <p id="insertHere"></p>
  </body>
</html>

Or you can put all your code in js files, and they will be invoked in the order they are declared.

Edit Given objections and more questions popping in the ments, I'll add this. The best and cleanest way to achieve this remains to put your code in a .js file of its own and put all your <script> tags inside <head>, with yours last, as it relies on others to run.

Then you can either add the attribute defer to your <script> or have everything wrapped in an event handler for DOMContentLoaded so that it gets run after the DOM is fully loaded.

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Document</title>
      <script src='other1.js'></script> <!-- let's say this one declares myvar -->
      <script src='other2.js'></script>
      <script src='other3.js'></script>
      <script src='myscript.js'></script>
  </head>
  <body>
    <p id="insertHere"></p>
  </body>
</html>

myscript.js

window.addEventListener('DOMContentLoaded', e => {
    document.querySelector('#insertHere').innerHTML = myvar;
});

本文标签： access a variable declared on a separate JavaScript file in htmlStack Overflow

版权声明：本文标题：access a variable declared on a separate JavaScript file in html - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744989152a2636275.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。