首页 > 解决方案 > 当它是一个单独的 .js 文件时,无法让 JavaScript 在 HTML 网页中工作

问题描述

我已经为此苦苦挣扎了 2 天,但没有运气。我正在尝试学习 JavaScript,并且正在努力完成这本书。我的 HTML 代码很简单,如下:

</head>
<body>
    <input type="button" value="Click" onclick="alert(calcTot(48.21));" onmouseover="this.style.color = 'green';">

    <form>
        ZIP:<br />
        <input type="text" id="zip" onblur="fillCity();" /><br />
        City:<br />
        <input type="text" id="city" />
    </form>

    <script>src="JavaScript_Practice.js"</script>
</body>
</html>

我在一个单独的 .js 文件中编写了 2 个单独的函数,它们如下:

function calcTot(merchTot) {
    var orderTot;
    if (merchTot >= 100) {
        orderTot = merchTot;
    }
    else if (merchTot < 50.01) {
        orderTot = merchTot + 5;
    }
    else {
        orderTot = merchTot + 5 + merchTax(merchTot);
    }

    function merchTax(merchTot) {

        var taxTot = (0.03 * (merchTot - 50))

        return taxTot
    }

    return orderTot.toFixed(2);
}


function fillCity() {
    var cityName;
    var zipEntered = document.getElementById("zip").value;
    switch (zipEntered) {
        case "60608":
            cityName = "Chicago";
            break;
        case "68114":
            cityName = "Omaha";
            break;
        case "53212":
            cityName = "Milwaukee";
    }
    document.getElementById("city").value = cityName;
}

这些文件位于同一个文件夹中,我也尝试在 HTML 文件中完全指定 .js 文件的路径。我也尝试将类型指定为“文本/JavaScript”,但无济于事。当我按 F12 并尝试单击我的按钮/在字段中输入值时,我收到以下错误:

SCRIPT5009: SCRIPT5009: 'calcTot' is not defined

0: 'fillCity' is not defined

在 IE 上启用了 JavaScript,我已经在 IE、Chrome 和 Firefox 上尝试过。它对它们中的任何一个都不起作用。

当我对 .html 文件中的函数进行硬编码时,这些函数工作得很好。最后,我尝试将文件上传到 GitHub 并从那里引用它,但它也不起作用。我觉得它一定是我不知道的小而简单的东西,任何帮助将不胜感激。

标签: javascripthtml

解决方案


包含 js 文件的语法实际上是:

<script src="JavaScript_Practice.js"></script>

不是

<script>src="JavaScript_Practice.js"</script>

推荐阅读