当我加载html页面时,为什么我的外部JavaScript文件不能工作?

Why doesn't my external JavaScript file work when I load my html page?

本文关键字:JavaScript 外部 我的 文件 不能 工作 为什么 加载 html      更新时间:2023-09-26

我把html和JavaScript代码分开了。我将JavaScript代码放入一个单独的文件中,并使用"script"标签在我的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>

好了,我把你的代码放到一个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/casedefault部分有一个错位的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;