Question

HTML code：

employee.html
login.html

外部JavaScript代码：

<!DOCTYPE HTML>
    <html>
        <head>
        <meta charset="utf-8">
        <script src="index.js"></script>
        <title>Design All</title>
        </head>
    <body>
        <h2>------------------------</h2>
        <h1 id="test">Should this change?!</h1>
        <h2>------------------------</h2>
    </body>
</html>

注意： 1.如果我使用函数调用，它可以工作。 2.如果我在HTML文件中编写脚本，它也可以。我使用了jsfiddle，它显示得非常好。

任何人都可以帮我解决这个问题吗？

Answer 1

我认为HTML尚未加载。在body上使用onload属性以确保加载DOM：

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <script>
    var myFunction = function() {
      var product = "Camera";
      var price = 130;
      var introduction = document.getElementById("test");
      introduction.innerHTML = product + " " + price;
    }
    </script>
    <title>Design All</title>
    </head>
<body onload="myFunction()">
    <h2>------------------------</h2>
    <h1 id="test">Should this change?!</h1>
    <h2>------------------------</h2>
</body>

Answer 2

您必须明确的一件事是按顺序加载HTML 在你的代码中

...........................
<script src="index.js"></script>
................
.................... 
 <h1 id="test">Should this change?!</h1>

这里首先加载JavaScript，然后加载剩余的html 由于JavScript将在您编写它的方式加载时执行，因此它不会找到以后的html标记。所以它不会得到那个元素（<h1 id="test">Should this change?!</h1>）。

但如果您稍后加载JS，那么它将按预期工作。

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <title>Design All</title>
    </head>
<body>
    <h2>------------------------</h2>
    <h1 id="test">Should this change?!</h1>
    <h2>------------------------</h2>
</body>
<script src="index.js"></script>

这就是专家建议最后加载JS的原因。

Answer 3

<!DOCTYPE HTML>
    <html>
        <head>
        <meta charset="utf-8">
         <title>Design All</title>
         <script src="index.js"></script>        
</head>
    <body onload = "chng()">
        <h2>------------------------</h2>
        <h1 id="test">Should this change?!</h1>
        <h2>------------------------</h2>
    </body>
</html>

<强> index.js

// JavaScript
function chng(){
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}

从javascript外部文件无法从HTML文件获取id并替换内容

3 个答案: