質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

解決済

エラーがどこに発生しているかわからない

shin710
shin

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

2回答

0リアクション

0クリップ

409閲覧

投稿2022/11/24 03:33

編集2022/11/24 04:02

【必須】やりたい・やりたかったこと
郵便番号を入力したら、住所を表示させる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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/11/24 13:00

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

int32_t

2022/11/24 04:02

main.js の内容はどのようになっていますか (TypeScriptのコードではなく)
shin710

2022/11/24 04:03

以下のようになっております。 ``` 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(); }); ```

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。