在HTML/PHP中正确调用外部JavaScript函数指南

<script type="text/javascript" src="js/change.color.js">
    // 错误：这里的语句不会被执行
    headerColor();
</script>

<!-- 1. 加载外部JavaScript文件 -->
<script type="text/javascript" src="js/change.color.js"></script>

<!-- 2. 在一个独立的<script>块中调用函数 -->
<script type="text/javascript">
    // 假设 headerColor() 在 change.color.js 中定义
    headerColor(); 
</script>

<!-- 1. 加载外部JavaScript文件 -->
<script type="text/javascript" src="js/change.color.js"></script>

<!-- 2. 在一个独立的<script>块中，使用事件监听器调用函数 -->
<script type="text/javascript">
    // 当页面所有内容（包括图片、样式表等）加载完毕后执行 headerColor
    window.addEventListener("load", headerColor); 

    // 或者，如果只需要DOM结构就绪，可以使用 DOMContentLoaded
    // document.addEventListener("DOMContentLoaded", headerColor);
</script>

// 初始化函数，可能包含一些全局设置
function init() {
    console.log("初始化颜色变更模块...");
    // 实际的初始化逻辑
}

// 变更背景颜色
function changeBackgroundColor() {
    document.body.style.backgroundColor = '#f0f0f0';
    console.log("背景颜色已变更。");
}

// 变更文本颜色（黑白切换）
function changeTextBlackWhite() {
    const elements = document.querySelectorAll('h1, h2, p');
    elements.forEach(el => {
        el.style.color = el.style.color === 'black' ? 'white' : 'black';
    });
    console.log("文本颜色已切换。");
}

// 变更TikTok图标颜色（假设存在）
function changeTiktokIconBlackWhite() {
    const tiktokIcon = document.querySelector('.tiktok-icon');
    if (tiktokIcon) {
        tiktokIcon.style.filter = 'invert(100%)'; // 简单示例
        console.log("TikTok图标颜色已切换。");
    }
}

// 组合函数：设置头部颜色
function headerColor() {
    init();
    changeBackgroundColor();
    changeTextBlackWhite();
    console.log("头部颜色设置完成。");
}

// 组合函数：设置标题颜色
function titleColor() {
    init();
    changeBackgroundColor();
    changeTextBlackWhite();
    changeTiktokIconBlackWhite(); // 注意：原问题中此处缺少括号
    console.log("标题颜色设置完成。");
}