Q&A
main.js の内容はどのようになっていますか (TypeScriptのコードではなく)
【必須】やりたい・やりたかったこと
郵便番号を入力したら、住所を表示させる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
以下のようになっております。
```
var inputBox = document.getElementById('inputBox');
var address1 = document.getElementById('address1');
var address2 = document.getElementById('address2');
var address3 = document.getElementById('address3');
var button = document.getElementById('button');
function getAddress() {
var zipCode = inputBox.value;
var url = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=".concat(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.warn(error.message);
});
}
button.addEventListener('click', function () {
getAddress();
});
```
回答2件
0
自己解決
送信方法がtype="submit"になっており、type="button"にしたところ解決しました。
ご協力をいただいた皆様ありがとうございました。
投稿2022/11/24 04:19
総合スコア1
0
html
1 <script src="main.js" type="javascript/text"></script>
type 属性を消すか、type="text/javascript" にしましょう。
投稿2022/11/24 04:09
編集2022/11/24 04:09総合スコア21929
あなたの回答
tips
プレビュー
