JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  郵便番号：<input type="text" id="zipcode" />
  <button id="search">住所検索</button>
</p>
<p>
  住所：<input type="text" id="address" />
</p>

JavaScript

// 検索ボタン
const search = document.getElementById('search');
// 検索ボタンを押した時の処理
search.addEventListener('click', (e) => {
  // 郵便番号を取得
  const zipcode = document.getElementById('zipcode').value;
  // JSONPで郵便番号を検索します
  const script = document.createElement('script');
	script.src = `https://geoapi.heartrails.com/api/json?method=searchByPostal&postal=${zipcode}&callback=callback`;
  // JavaScriptのタグを埋め込むのがJSONPの特徴です
  // また、callbackというAPIの返り値を適用する関数名も指定します
	document.body.appendChild(script);
});
// APIからの結果を受け取って表示します
window.callback = (address) => {
  console.log(address);
  const L = address.response.location[0];
  document.getElementById('address').value = `${L.prefecture}${L.city}${L.town}`;
}