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

Question

我分离了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>

Answer 1

好的，我将您的代码放入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`.
     */
}

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

有关工作示例，请参见我链接到的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;

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

问题描述

1 个解决方案

解决方案1
0 2013-01-08 07:47:13

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

问题描述

1 个解决方案

解决方案1 0 2013-01-08 07:47:13

解决方案1
0 2013-01-08 07:47:13