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

我分开我的HTML和JavaScript代码。 我将我的JavaScript代码放到一个单独的文件中,并使用“脚本”标签在我的html文件中引用它。 我在JavaScript代码中有两个函数,一个用于创build一个自动填充,这意味着如果我开始在文本框中input文本,该函数给了我一个可能的名字,我可能想要在文本框下面写,另一个创build一个时钟给出当前时间。 这里是我的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 = "AM"; break; case 12: hours = intHours+":"; ap = "PM"; break; case 24: intHours = 12; hours = intHours + ":"; ap = "AM"; break; default: if (intHours > 12) { intHours = intHours - 12; hours = intHours + ":"; ap = "PM"; break; } if(intHours < 12) { hours = intHours + ":"; ap = "AM"; } } 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 。 大部分问题都是在代码debugging器/错误控制台的帮助下find的。

你有一些超出范围的variables,这意味着:

 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部分出现了错位,还有一些小问题。

看到我链接到一个工作的例子 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 = "AM"; break; case 12: hours = intHours+":"; ap = "PM"; break; case 24: intHours = 12; hours = intHours + ":"; ap = "AM"; break; default: if (intHours > 12) { intHours = intHours - 12; hours = intHours + ":"; ap = "PM"; } if(intHours < 12) { hours = intHours + ":"; ap = "AM"; } 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;