前提・実現したいこと
htmlファイルとjsファイルを分ける方法を調べて、とりあえず郵便番号検索apiを利用する形のプログラムを書いてみたのですが、検索ボタンを押しても何も起きません。
htmlにjsを埋め込むと問題なく動作するので読み込みができていないのだと思うのですが、原因がわかりません。
知恵をお貸し頂けないでしょうか。
該当のソースコード
Sample
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Insert title here</title> 6 7<script type="text/javascript" src="jquery-3.5.1.min.js"></script> 8</head> 9<body> 10<form> 11 <div> 12 <label for="zip">郵便番号:</label><br /> 13 <input id="zip" type="text" size="10" /> 14 <input id="search" type="button" value="検索" /> 15 </div> 16 <div> 17 <label for="address">住所:</label><br /> 18 <input id="address" type="text" size="35" /> 19 <input id="address2" type="text" size="35"/> 20 <input id="address3" type="text" size="35"/> 21 </div> 22 <script type="text/javascript" src="../search.js"></script> 23 </form> 24</body> 25</html>
search
1$(function() { 2 // [検索]ボタンクリックで郵便番号検索を実行 3 $('#search').click(function() { 4 $.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?', 5 { 6 zipcode: $('#zip').val() 7 } 8 ) 9 // 結果を取得したら… 10 .done(function(data) { 11 // 中身が空でなければ、その値を[住所]欄に反映 12 if (data.results) { 13 var result = data.results[0]; 14 $('#address').val(result.address1); 15 $('#address2').val(result.address2); 16 $('#address3').val(result.address3); 17 // 中身が空の場合は、エラーメッセージを反映 18 } else { 19 $('#address').val('該当する住所が存在しません。'); 20 } 21 }); 22 }); 23});
補足情報(FW/ツールのバージョンなど)
windows10 64bit
eclipse
tomcat8.5
回答1件
あなたの回答
tips
プレビュー