当我加载我的 html 页面时，为什么我的外部 JavaScript 文件不起作用？答案

【问题标题】：Why doesn't my external JavaScript file work when I load my html page?当我加载我的 html 页面时，为什么我的外部 JavaScript 文件不起作用？
【发布时间】：2022-02-02 06:06:04
【问题描述】：

我分离了我的 html 和 JavaScript 代码。我将我的 JavaScript 代码放入一个单独的文件中，并使用“脚本”标签在我的 html 文件中引用它。我的 JavaScript 代码中有两个函数，一个用于创建自动填充，这意味着如果我开始在文本框中输入文本，该函数会为我提供一个可能的名称，我可能想在文本框下面写这个名称，另一个创建一个时钟给出当前时间。这里分别是我的 JavaScript 和 html 文件。你能告诉我问题是什么吗？

function Complete(obj, evt) {
    var names = new Array("albert","alessandro","chris");
    names.sort();

    if ((!obj) || (!evt) || (names.length == 0)) {
        return;
    }
    if (obj.value.length == 0) {
        return;
    }

    var elm = (obj.setSelectionRange) ? evt.which : evt.keyCode;

    if ((elm < 32) || (elm >= 33 && elm <= 46) || (elm >= 112 && elm <= 123)) {
        return;
    }

    var txt = obj.value.replace(/;/gi, ",");
    elm = txt.split(",");
    txt = elm.pop();
    txt = txt.replace(/^\s*/, "");

    if (txt.length == 0) {
        return;
    }

    if (obj.createTextRange) {
        var rng = document.selection.createRange();
        if (rng.parentElement() == obj) {
            elm = rng.text;
            var ini = obj.value.lastIndexOf(elm);
        }
    } else if (obj.setSelectionRange) {
        var ini = obj.selectionStart;
    }

    for (var i = 0; i < names.length; i++) {
        elm = names[i].toString();
        if (elm.toLowerCase().indexOf(txt.toLowerCase()) == 0) {
            obj.value += elm.substring(txt.length, elm.length);
            break;
        }
    }

    if (obj.createTextRange) {
        rng = obj.createTextRange();
        rng.moveStart("character", ini);
        rng.moveEnd("character", obj.value.length);
        rng.select();
    } else if (obj.setSelectionRange) {
        obj.setSelectionRange(ini, obj.value.length);
    }
}

function tick() {
    var hours, minutes, seconds, ap;
    var intHours, intMinutes, intSeconds;
    var today;

    today = new Date();

    intHours = today.getHours();
    intMinutes = today.getMinutes();
    intSeconds = today.getSeconds();

    switch(intHours){
        case 0: 
            intHours = 12;
            hours = intHours+":";
            ap = "A.M.";
            break;
        case 12:
            hours = intHours+":";
            ap = "P.M.";
            break;
        case 24:
            intHours = 12;
            hours = intHours + ":";
            ap = "A.M.";
            break;
        default: 
            if (intHours > 12) {
                intHours = intHours - 12;
                hours = intHours + ":";
                ap = "P.M.";
                break;
            }
        if(intHours < 12) {
            hours = intHours + ":";
            ap = "A.M.";
        }
    }

    if (intMinutes < 10) {
        minutes = "0"+intMinutes+":";
    } else {
        minutes = intMinutes+":";
    }
    if (intSeconds < 10) {
        seconds = "0"+intSeconds+" ";
    } else {
        seconds = intSeconds+" ";
    } 

    timeString = hours+minutes+seconds+ap;
    Clock.innerHTML = timeString;
    window.setTimeout("tick();", 100);
}
window.onload = tick;

<HTML>
    <HEAD>
    <H1 STYLE="text-align:center;" STYLE="font-family:verdana;">FDM Markets</H1>
    <H2 STYLE="text-align:center;">Trading Platofrm</H2></br>

    <STYLE type="text/css">
        #p1 span {
            width: 65px;
            display: block;
            float: left;
        }
    </STYLE>

    <BODY>
        <SCRIPT type="text/javascript" src="jscodeloginpage.js"></SCRIPT>
        <p1>Login</p1></br>
        </br>
        <FORM name="anyForm">
            Username: <input type="text" name="anyName" size="15" onKeyUp="Complete(this, event)"></br>
            Password: <input type="text" size="15" name="password_box">
        </FORM>

        <div id=Clock style=font-size: 12">&nbsp;</div>
    </BODY>
</HTML>

【问题讨论】：

你为什么不告诉我们问题是什么？什么不起作用？加载页面时会发生什么？您在控制台中看到错误吗？你能从浏览器中的网络工具判断你的脚本文件是否真的被加载了吗？
嗨！相对于HTML文档，JS脚本存放在哪里？在同一个目录？您的src 属性中的jscodeloginpage.js 之前可能需要/？您的浏览器控制台有错误吗？
你不应该在<head> 中有<h1> 和<h2>。您也应该关闭<head>。
我还建议对所有标签和属性使用小写
没有错误没有出现。出现的唯一事情是我的 html 内容，但没有显示当前时间的时钟或自动填充也不起作用。这就是问题所在。

标签： javascript html node.js

【解决方案1】：

好的，我将您的代码放入 a jsbin。大多数问题都是在它的代码调试器/错误控制台的帮助下发现的。

你有一些超出范围的变量，意思是：

if(x){
    var a = 1;
}
if(y){
    doSomethingWith(a);
    /* 
     * JavaScript can't access `a` here, since it was declared in the scope of the
     * previous `if`. That instance of `a` only exists within that first `if`.
     */
}

您的switch/case 的default 部分中有一个错误的break，以及其他一些小问题。

请参阅我链接到的 jsbin 以获取工作示例。我还对您的 HTML 进行了一些修改。这一行：

<div id=Clock style=font-size: 12">&nbsp;</div>

缺少一些"的：

<div id="Clock" style="font-size: 12">&nbsp;</div>

另外，</br> 不是有效标签，您可能正在寻找 <br />

这是你编辑的 JS：

function Complete(obj, evt) {
    var names = new Array("albert","alessandro","chris");
    names.sort();

    var elm = (obj.setSelectionRange) ? evt.which : evt.keyCode;

    if (!obj ||
        !evt ||
        names.length === 0 ||
        obj.value.length === 0 ||
        elm < 32 ||
        (elm >= 33 && elm <= 46) ||
        (elm >= 112 && elm <= 123)) {
        return;
    }

    var txt = obj.value.replace(/;/gi, ",");
    elm = txt.split(",");
    txt = elm.pop();
    txt = txt.replace(/^\s*/, "");

    if (txt.length === 0) {
        return;
    }

    var ini, rng;
    if (obj.createTextRange) {
        rng = document.selection.createRange();
        if (rng.parentElement() == obj) {
            elm = rng.text;
            ini = obj.value.lastIndexOf(elm);
        }
    } else if (obj.setSelectionRange) {
        ini = obj.selectionStart;
    }

    for (var i = 0; i < names.length; i++) {
        elm = names[i].toString();
        if (elm.toLowerCase().indexOf(txt.toLowerCase()) === 0) {
            obj.value += elm.substring(txt.length, elm.length);
            break;
        }
    }

    if (obj.createTextRange) {
        rng = obj.createTextRange();
        rng.moveStart("character", ini);
        rng.moveEnd("character", obj.value.length);
        rng.select();
    } else if (obj.setSelectionRange) {
        obj.setSelectionRange(ini, obj.value.length);
    }
}

function tick() {
    var hours, minutes, seconds, ap;
    var intHours, intMinutes, intSeconds;
    var today;

    today = new Date();

    intHours = today.getHours();
    intMinutes = today.getMinutes();
    intSeconds = today.getSeconds();

    switch(intHours){
        case 0: 
            intHours = 12;
            hours = intHours+":";
            ap = "A.M.";
            break;
        case 12:
            hours = intHours+":";
            ap = "P.M.";
            break;
        case 24:
            intHours = 12;
            hours = intHours + ":";
            ap = "A.M.";
            break;
        default: 
            if (intHours > 12) {
                intHours = intHours - 12;
                hours = intHours + ":";
                ap = "P.M.";
            }
            if(intHours < 12) {
                hours = intHours + ":";
                ap = "A.M.";
            }
            break;
    }

    if (intMinutes < 10) {
        minutes = "0"+intMinutes+":";
    } else {
        minutes = intMinutes+":";
    }
    if (intSeconds < 10) {
        seconds = "0"+intSeconds+" ";
    } else {
        seconds = intSeconds+" ";
    } 

    timeString = hours+minutes+seconds+ap;
    Clock.innerHTML = timeString;
    window.setTimeout(tick, 100);
}
window.onload = tick;

【讨论】：