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

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

转载作者：太空宇宙更新时间：2023-11-04 02:41:49

我将 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>

最佳答案

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

您放错了位置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;

关于javascript - 当我加载 html 页面时，为什么我的外部 JavaScript 文件不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14199055/

文章推荐： node.js - 静态 Web 应用程序的服务器

文章推荐： c - 从数组中读取数字然后将它们插入列表的程序不起作用

文章推荐：创建两个以上的 StatusBar 部件

javascript - 在父选项卡(页面)上显示叠加层，直到打开其所有子选项卡(页面)
假设我有父页面。当我单击“打印”时，会打开一个新选项卡(页面)以进行打印预览。我想要的是，当我单击“打印”时，父选项卡(页面)上应显示覆盖层，以停止进一步的工作，直到子选项卡关闭。 Because
javascript - 如何从 HTTPS 页面 POST 数据到 HTTP 页面
我知道这是不可能的，但我想我还是会问这个问题。我有一个 HTTPS 页面，并且正在动态创建一个表单。我想将表单发布到 HTTP 页面。在浏览器不弹出警告的情况下这可能吗？当我在 IE8 上执行此操作
javascript - 将 .aspx 页面 html 渲染/调用到另一个 .aspx 页面
在我的应用程序中，我实现了ajax 4.0客户端模板目前我的模板位于同一个.aspx页面上。 (例如 Main.aspx) 但我想将它们外部化。(即所有 HTML 都会放在另一个页面上) 为此，我使
javascript - 锁定/卡住导航栏/整个 html 页面，直到加载其他 html 页面
我目前正在构建自己的网络应用程序。在此应用程序的标题中有一个导航栏。我将相同的导航栏添加到我的所有 html 页面，以便在页面之间导航时保持可见，并将导航元素设置为事件到我现在所在的页面。我的
iis-7 - Windows 身份验证不适用于经典 ASP 页面(但适用于同一站点中的 ASP.Net 页面)
我们有一个在集成管道下运行的 IIS7 Intranet 站点，该管道主要是 ASP.Net，带有一些传统的经典 ASP 页面。该站点允许匿名访问大多数区域，但使用 Windows 身份验证来保护某些
c# - 如何将长 HTML 文件拆分为单独的相互链接的页面，例如页面 1、页面 2、页面 3
有一个要求，我需要根据 div 标签的高度超过 700 像素的条件将大型 HTML 页面拆分为多个页面。我还可以根据字数拆分页面。下面的示例根据 HTML 标签分割页面，而我需要根据 div 高度
html - 如何在不使用 jquery 的情况下在另一个 html 页面 div 中显示 html 页面
有两个 html 页面，如果在第一个页面中单击特定图像，它将转到第二个 html 页面。如果在第二个 html 页面上的任何地方单击它应该返回到第一页并将第二页完全显示在第一页的一个 div 中 1s
haskell - Servant 中的 Html 页面——如何结合 REST API 和静态 html 页面？
我有一个简单的 hello world Servant 应用程序。我需要向它添加一些静态或动态的 html 页面。我怎样才能做到这一点？在文档中没有提到它。注意我不想在 Haskell 代码中创建 h
javascript - jQuery 将外部 html 页面 <title> 插入另一个 html 页面
我有两个文件 index.html 和 index2.html。这两个文件都在本地机器上的同一目录中(无法访问 PHP 等)。我正在努力 Page Title 使用 jQuery 从 index.h
java - 为一个 Servlet 创建一个动态前端 JSP 页面，同时将 Servlet 的输出显示到 JSP 页面
假设我有一个 JSP 页面 index.jsp User id:
javascript - 页面 A 将值发布到页面 B，页面 B 使用 cURL 向页面 C 发送另一个帖子，并将响应返回到页面 A
我面临着一个对我来说非常陌生的情况。我会尽力让事情变得简单来解释它一步一步来。 1)在页面 A(用户表单)中，我从字段中获取一些值并将其作为 jQuery AJAX POST 发送到页面 B。这是主要
javascript - JQuery 函数点击 html 页面 1 上的按钮，影响 html 页面 2 的列
我正在尝试弄清楚如何从 buttons.html 获取用户按钮点击动态切换第二个列的可见性 userinput.html 。我正在使用 DataTables userinput.html表并认为我有
asp.net-mvc - angularjs 仅带有 cshtml 页面，而不是带有 web api 2 的 html 页面
我有asp。净 mvc4 项目。 Angularjs 已集成。我已经按照以前的要求构建了 HTML 页面和 WEB API 2。现在出于某种原因，我必须使用 CSHTML 页面。以前我只有 web
WordPress 页面 - 未找到页面
我的网站包含大约 18 个不同的页面。以管理员身份登录后，我单击“页面”。我看到了以下内容 All (20) | Mine (19) | Published (19) | Draft (1) No
Haskell "man"页面？
Haskell 中每个函数都有手册页吗？换句话说，我可以在某处输入 man fst 并获取有关该函数的手册或帮助页面吗？我发现大量的功能势不可挡! 我正在使用 GHC 和 GHCi。最佳答案我不知
Github 页面 - 禁用除单个站点之外的所有站点的自定义域重定向？
我一直在用github pages很长一段时间以来，并使用自定义域重定向功能来重定向我的 user website来自 prahladyeri.github.io到我自己的域名 https://www
显示旧代码的 Github 页面
我对 Github 有一个基本的了解:我知道如何创建、添加、提交、推送和克隆存储库。我也开始探索 Github 页面来托管我的项目。我的最新项目于 3 月开始并将其推送到 gh-page。从那以后，我
Airflow Ooops 页面
在尝试查看日志时，Airflow 会抛出一个带有以下消息的 oops 页面: File "/Users/user/.pyenv/versions/3.5.2/lib/python3.5/locale.
GitHub 页面 - 网址重写支持
我已经按照此处列出的步骤 (https://pages.github.com/) 为我正在处理的网站设置了一个 GitHub 页面我设置的站点当前托管在 IIS 下，并使用 URL Rewrite
将域重定向到 Openshift 页面
我想将我的 domain.com 重定向到 openshift 页面 (openshift-app.rhcloud.com)。我已经按照描述完成了 here它有效。唯一的问题是，在任何网站上，我都不会

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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