全局变量搭配innerHTML使用疑问：外部JS文件中变量置外为何失效？

Hey there! Let's break down why your code works when the variable lives inside the function but not when it's global—it's not that you can't use a global variable here, it's all about timing and how you're interacting with the DOM.

The Most Likely Culprit: DOM Loading Order #

Your global variable line var globalVariable = document.getElementById("div-tag").innerHTML; runs as soon as your external JS file loads. If that JS file executes before the browser has finished parsing the <div id="div-tag"> element (even if you put the JS at the bottom of the page—say, if you used async/defer on the script tag, or accidentally placed the script above the div), document.getElementById("div-tag") will return null. Trying to access null.innerHTML throws an error, which breaks the rest of your code.

When you move the variable inside myFunc(), though, the code only runs when you type into the input box. By that point, the entire page's DOM is fully loaded and ready, so the element exists and you can grab its content without issues.

Another Possible Issue: You're Not Syncing the Variable to the DOM #

If your goal is to update the div's content when you type, your current code only modifies the globalVariable value—it never writes that new value back to the div's innerHTML. If you added that step when moving the variable inside the function (even by accident), that's why it seemed to "work". The global variable version was calculating the right number, but you just weren't displaying it.

Fixes to Try #

1. Fix the DOM Timing Problem #

Make sure your script runs after all DOM elements are ready:

• Place your external script tag right before the closing </body> tag, without async or defer attributes. This ensures the browser parses all HTML first before running your JS.
• Or, wrap your global variable initialization in a DOMContentLoaded event listener to guarantee the DOM is ready:

let globalVariable;

// Wait for the DOM to fully load before accessing elements
document.addEventListener('DOMContentLoaded', function() {
  globalVariable = document.getElementById("div-tag").innerHTML;
});

function myFunc() {
  // Convert input value to a number to avoid string math issues
  const amount = parseFloat(document.getElementById("txtValue").value);
  
  // Only calculate if the input is a valid number
  if (!isNaN(amount)) {
    globalVariable = amount * 0.10;
    console.log(globalVariable);
    // Update the div's content to show the new value
    document.getElementById("div-tag").innerHTML = globalVariable;
  }
}

2. Sync the Variable to the DOM (If Needed) #

If you want the div to update when you type, don't forget to add that innerHTML update line like in the code above—variables don't automatically sync with DOM elements, you have to do that manually.

A quick side note: Use let or const instead of var to avoid weird variable hoisting issues, and always validate input to prevent errors from non-numeric values!

内容的提问来源于stack exchange，提问作者Giefdonut