После сохранения HTML-файла Javascript не работает

Привет, народ! Моя цель - создать HTML-файл без внешнего Javascript.После сохранения HTML-файла Javascript не работает

Все работает в https://jsfiddle.net. Но, открыв файл HTML, поисковый скрипт больше не доступен.

Что я должен исправить из приведенного ниже кода?

Спасибо за любую помощь

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
\t <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 = [ 
 
    \t \t {"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"}, 
 
    \t \t {"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"}, 
 
    \t \t {"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"} 
 
    \t  ]; 
 
    filter.onkeyup = function() { 
 
     var zipcodeToSearch = filter.value; 
 
     var n = zipcodeToSearch.length; 
 
     if (n != 5) { 
 
     \t document.getElementById("address").value = ""; 
 
     \t document.getElementById("County").value = ""; 
 
     } else { 
 
      for (var i = 0; i < JSONtbl.length; i++) { 
 
      \t if (JSONtbl[i].zipcode == zipcodeToSearch) { 
 
      \t \t document.getElementById("address").value = JSONtbl[i].address; 
 
      \t \t 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>

источник

2016-04-20 hbbz040

Ваша страница не включать '

код в вашем head работает, прежде чем импортировать JQuery (который вы делаете в организме). Этот код использует jQuery, поэтому он не сможет найти jQuery, когда он пытается его использовать (поскольку он еще не загружен).

Переместите тэг скрипта jQuery в нужное место над кодом, который ему нужен.

Для справок в будущем простые ошибки, подобные этому, могут быть легко решены с помощью инструментов dev большинства браузеров. Например, в chrome консоль показывает Uncaught ReferenceError: $ is not defined, что можно легко интерпретировать как jQuery, не присутствующий для скрипта, который пытается его использовать. Вы можете открыть их, нажав F12.

источник

2016-04-20 20:16:15 BryanGrezeszak

Вы включили Jquery после кода JS, который неправильно 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>

источник

2016-04-20 20:17:20

Смежные вопросы