回答編集履歴

1 title追記

退会済みユーザー

退会済みユーザー

2017/11/06 22:11  投稿

下記としてみました。
郵便番号検索APIが結果を返さないのは、_hiroさんもご指摘のように、該当のAPIはhttpsに対応していないためのようです。
```html
<!DOCTYPE html>
<html>
  <head>
     <title>Address Search</title>  
     <style>
#result {
  margin-top: 30px;
}
     </style>
     <script>
document.addEventListener("DOMContentLoaded", function () {
  const btn = document.getElementById('btn');
  btn.addEventListener('click', function() {
     const postalcode = document.getElementById('postalcode');
     const script = document.createElement('script');
     script.src = "http://zipcloud.ibsnet.co.jp/api/search?zipcode="
        + postalcode.value + "&callback=jsonData";
     document.body.appendChild(script);
     document.body.removeChild(script);
  });
});
function jsonData(data) {
  if (data.results) {
     const pref = document.getElementById('pref');
     const city = document.getElementById('city');
     const address = document.getElementById('saddress');
     pref.value = data.results[0].address1;
     city.value = data.results[0].address2;
     address.value = data.results[0].address3;
  }
}
     </script>
  </head>
  <body>
     <h3>Address Search</h3>
     <p>
        <label for="postalcode">Postal Code: </label>
        <input id="postalcode" type="text" size="13" maxlength="8" placeholder="example: xxx-xxxx">
        <button id="btn">Search</button>
     </p>
     <div id="result">
        <p><label for="pref">Prefectures: </label><input id="pref" type="text" size="6"></p>
        <p><label for="city">Cities: </label><input id="city" type="text" size="16"></p>
        <p><label for="saddress">Street address: </label><input id="saddress" type="text" size="16"></p>
     </div>
  </body>
</html>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る