コンソールに何も表示されない。
Q&A
Closed
. 【必須】やりたい・やりたかったこと
郵便番号を入力したら、住所を表示させるappを作成しています。
仕様としては、郵便番号をinputBoxに入力し、郵便番号検索ボタンを押すとaddress1~3に該当の住所が表示されるというものです。
しかし、郵便番号を入力して検索ボタンを押してもaddress1~3に何も表示されません。
コンソールにも表示させようとしても何も表示されないため、どこに問題が発生しているのかわかりません。
どなたかご教授いただけると幸いです。
- 【必須】起きている問題やエラーメッセージ ※できるだけ詳細に書いてください
html,Cssのコードを書き換えた後から、うまく動作しなくなった。
コードを見返しても問題がわからない
chromeのコンソールにもエラーの表示がされない。
他の成果物は動作している。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>住所検索app</title>
<meta name="description" content="住所を検索できるWEBAPPを制作しました。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="contact">
<div id="container">
<div class="head">
<h2>住所検索アプリ</h2>
</div>
<div class="boxes">
<input type="text" name="住所入力ボックス" id="inputBox" class="search" placeholder="例: 0001111" value="">
<input type="submit" name="送信ボタン" value="住所検索" id="button" class="search">
</div>
<div>
<h3>検索結果</h3>
</div>
<div id="searchResults" class="boxes">
<input type="text" value="" id="address1" placeholder="都道府県">
<input type="text" value="" id="address2" placeholder="市町村">
<input type="text" value="" id="address3" placeholder="番地">
</div>
</div>
</form>
<script src="main.js" type="javascript/text"></script>
</body>
</html>
const inputBox: any = document.getElementById('inputBox');
const address1: any = document.getElementById('address1');
const address2: any = document.getElementById('address2');
const address3: any = document.getElementById('address3');
const button: any = document.getElementById('button');
console.log(inputBox.value);
function getAddress() {
const zipCode: number = inputBox.value;
console.log(zipCode);
let url = `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipCode}`;
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(address) {
address1.value = address.results[0].address1;
address2.value = address.results[0].address2;
address3.value = address.results[0].address3;
})
.catch(function(error) {
console.log(error.message);
document.write(error.message);
});
}
button.addEventListener('click', function() {
getAddress();
});
-
【必須】ご自身で試されたこと ※できるだけ詳細に書いてください
・htmlコードの見直し
・TypeScriptコードの見直し
・chromeでキャッシュの削除
・PCの再起動
・VSCの再立ち上げ -
関連するURL ※GithubのリポジトリリンクやサーバーのURLなど
https://github.com/Shin-Goz-Maeda/ZipCodeSearchApp_TypeScript
どこに問題があるのかわかりません。
お手数をおかけしますが、ご教授いただけると幸いです。
0
