保存HTML文件后，Javascript不起作用

After Saving HTML file, Javascript does not works

本文关键字：Javascript 不起作用 HTML 文件 保存      更新时间：2023-09-26

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

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

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

感谢您的任何帮助

<!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>

你在 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>

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

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

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

在使用

之前，您必须包含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>
相关文章：