Question

嗨，伙计们！我的目标是创建没有外部Javascript的HTML文件。

一切都在https://jsfiddle.net中有效。但是，当我打开HTML文件时，搜索脚本不再可用。

我应该在下面的代码中修复什么？

感谢您的帮助

＆＃13;

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Search Zip Code</title>
    <style type="text/css">
    div {
        padding: 2px 5px;
    }
    </style>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    $(document).ready(function(){
    var filter = document.getElementById('zipcode');
    var JSONtbl = [
    		{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
    		{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
    		{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
    	     ];
    filter.onkeyup = function() {
        var zipcodeToSearch = filter.value;
        var n = zipcodeToSearch.length;
        if (n != 5) {
        	document.getElementById("address").value = "";
        	document.getElementById("County").value = "";
        } else {
            for (var i = 0; i < JSONtbl.length; i++) {
            	if (JSONtbl[i].zipcode == zipcodeToSearch) {
            		document.getElementById("address").value = JSONtbl[i].address;
            		document.getElementById("County").value = JSONtbl[i].County;
                 }
            }
            
        }
    };
    });
    //--><!]]>
    </script>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <form method="post">
    <div><input type="text" id="zipcode"/></div>
    <div><input type="text" id="address" disabled="disabled"></div>
    <div><input type="text" id="County" disabled="disabled"></div>
    </form>
</body>
</html>

＆＃13;

Answer 1

你已经在你的js代码之后包含了Jquery，这是错误的jQuery必须在任何其他与jQuery相关的代码之前加载，而cdata在这里是不相关的，不再需要了 https://jsbin.com/lubowovani/edit?html,output

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Search Zip Code</title>
    <style type="text/css">
    div {
        padding: 2px 5px;
    }
    </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    var filter = document.getElementById('zipcode');
    var JSONtbl = [
            {"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
            {"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
            {"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
             ];
    filter.onkeyup = function() {
        var zipcodeToSearch = filter.value;
        var n = zipcodeToSearch.length;
        if (n != 5) {
            document.getElementById("address").value = "";
            document.getElementById("County").value = "";
        } else {
            for (var i = 0; i < JSONtbl.length; i++) {
                if (JSONtbl[i].zipcode == zipcodeToSearch) {
                    document.getElementById("address").value = JSONtbl[i].address;
                    document.getElementById("County").value = JSONtbl[i].County;
                 }
            }

        }
    };
    });
    </script>
</head>
<body>
     <form method="post">
    <div><input type="text" id="zipcode"/></div>
    <div><input type="text" id="address" disabled="disabled"></div>
    <div><input type="text" id="County" disabled="disabled"></div>
    </form>
</body>
</html>

Answer 2

导入jQuery（您在正文中执行）之前，head中的代码正在运行。该代码使用jQuery，因此在尝试使用jQuery时将无法找到它（因为它尚未加载）。

将jQuery脚本标记移动到需要它的代码上方的头部。

为了将来参考这样的简单错误可以通过使用大多数浏览器的开发工具轻松解决。例如，在chrome中，控制台显示Uncaught ReferenceError: $ is not defined，这很容易被解释为jQuery不存在尝试使用它的脚本。您可以点击F12。

打开它们

Answer 3

在使用之前必须包含jQuery文件。

试试这个：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Search Zip Code</title>
    <style type="text/css">
    div {
        padding: 2px 5px;
    }
    </style>

    <!-- === HERE === -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- === HERE === -->

    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    $(document).ready(function(){
    var filter = document.getElementById('zipcode');
    var JSONtbl = [
            {"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
            {"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
            {"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
             ];
    filter.onkeyup = function() {
        var zipcodeToSearch = filter.value;
        var n = zipcodeToSearch.length;
        if (n != 5) {
            document.getElementById("address").value = "";
            document.getElementById("County").value = "";
        } else {
            for (var i = 0; i < JSONtbl.length; i++) {
                if (JSONtbl[i].zipcode == zipcodeToSearch) {
                    document.getElementById("address").value = JSONtbl[i].address;
                    document.getElementById("County").value = JSONtbl[i].County;
                 }
            }

        }
    };
    });
    //--><!]]>
    </script>
</head>
<body>
    <form method="post">
    <div><input type="text" id="zipcode"/></div>
    <div><input type="text" id="address" disabled="disabled"></div>
    <div><input type="text" id="County" disabled="disabled"></div>
    </form>
</body>
</html>

保存HTML文件后，Javascript无效

3 个答案: