为什么这个 JavaScript 在 <script> 标签中有效，但在 src 中无效答案

【问题标题】：Why does this JavaScript work in <script> tag but not with src为什么这个 JavaScript 在 <script> 标签中有效，但在 src 中无效
【发布时间】：2023-02-03 00:12:30
【问题描述】：

记者：

window.onload = function(siteTitle) {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body onload="siteTitle()">
        <h1 id="site-title" class="title">Site Title</h1>
        <div class="box-container">
        <div class="left-box">
            a
        </div>
        <div class="right-box">
            <h1 class="title-in">abc</h1>
            a
        </div>
        </div>
        
        <script src="main.js"></script>
        
    </body>
</html>

我已经尝试用我从其他问题和网站上找到的东西多次更改它，但我无法解决这个问题该脚本直接放在标签中时有效，但在导入时无效谢谢您的帮助

【问题讨论】：

您在浏览器控制台中收到任何错误吗？
我也一无所知。无论如何，为什么要使用onload="siteTitle()" 并通过 js 附加事件处理程序？如果你想让第一个策略起作用，你需要一个名为siteTitle的函数，无论如何在你的js中定义
您不能同时使用 <body onload="XXX"> 和 window.onload = YYY，因为它们都使用相同的 onload 属性。
这是各种错误。没有名为siteTitle 的函数。您在 window.onload= 部分所做的是“如果该函数获取参数（它没有），将其放入名为“siteTitle”的 var 中。放弃所有这些。只需创建一个 event listener
@hjh，作为网络开发人员，控制台和元素检查是必需的工具。去和你的管理员谈谈，让他们解除封锁。

标签： javascript html

【解决方案1】：

尝试像这样为您的函数命名

window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};

因为您将 siteTitle 作为函数提供，但它是一个参数我不确定，但它可以为你工作。

【讨论】：

函数表达式中名称的范围是函数体，它不是全局名称。

【解决方案2】：

我试过了

window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};

和

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <link rel="stylesheet" href="styles.css" />
        <script src="main.js"></script>
    </head>
    <body>
        <h1 id="site-title" class="title">Site Title</h1>
        <div class="box-container">
        <div class="left-box">
            a
        </div>
        <div class="right-box">
            <h1 class="title-in">abc</h1>
            a
        </div>
        </div>
        
        
        
    </body>
</html>

和

function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
}

和

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <link rel="stylesheet" href="styles.css" />
        <script src="main.js"></script>
    </head>
    <body>
        <h1 id="site-title" class="title" onload="siteTitle()">Site Title</h1>
        <div class="box-container">
        <div class="left-box">
            a
        </div>
        <div class="right-box">
            <h1 class="title-in">abc</h1>
            a
        </div>
        </div>
        
        
        
    </body>
</html>

这些都不起作用

【讨论】：

附加信息应该添加到问题中而不是作为答案发布，因为它不是答案。小心引入大量无关紧要的信息。

【解决方案3】：

由于您是从 <body onload="siteTitle()"> 调用该函数，因此您需要使用普通函数定义来定义它，而不是通过分配给 window.onload。

function siteTitle () {
    const element = document.getElementById("site-title");
    element.innerHTML = "New Heading";
};

【讨论】：