javascript郵便番号から住所をフォームに自動入力するＪＳがうまくいかない。

javascriptのファイルを下記のサイトダウンロードして、
html内に、scriptにてファイルを挿入したのですが、うまく動作しません。
[webサイト]
https://github.com/kotarok/jQuery.zip2addr
大変恐縮なのですが、私の稚拙なコードを下記貼り付けました。
アドバイスいただけますと幸いです。

/html code/
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>テスト</title>
    <link rel="stylesheet" href="css/style-test.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.zip2addr.js"></script>
  </head>
  <body>
    <div class="">
      <h1>お客様情報の入力</h1>
      <p>お客様の情報を入力いただき、<br>同意して
        登録内容を確認する」ボタンを押してください</p>
    <form class="register-input" action="#" method="post">
      <div class="">
        <ul class="zipcode-input">
          <li><span>必須</span>郵便番号</li>
          <li>郵便番号<input type="text" id="zipcode"  size="8"></li>
          <li>都道府県<input type="text" id="prefecture"  size="8"></li>
          <li>市区町村<input type="text" id="address"  size="8"></li>
        </ul>
      </div>
    </form>
  </div>
  </body>
</html>

/CSS code/
@charset "UTF-8";
.register-input{
  border:5px solid #c6f5eb;
  border-radius: 10px;
  font-family: sans-serif;
  margin: 40px;
  padding:30px;
}
.register-input ul{
  list-style: none;
}
.zipcode-input{
  display: flex;
  justify-content: space-around;
  list-style: none;
  align-items: center;
  font-size:1.rem;
  border-bottom: 1px dotted #000000;
  padding:20px;
  margin:20px;
}

gentaro

2020/05/05 02:47

通常の文章とコードの部分が全部```で囲まれた中に入ってます。 ```で囲むのはコードだけにしましょう。あと「うまく動作しません。」じゃ何が起きてるのか誰もわからんので、そもそもの期待している動作とか、いま発生している具体的な「うまくいかない内容」を書きましょう。ガイドラインを読んでちゃんと伝わるような質問文に修正してみてください。 https://teratail.com/help/question-tips

takochan1192

2020/05/05 05:21

gentaro様　ご指摘ありがとうございます。大変失礼いたしました。もう一度、ガイドラインに従い、質問をし直すとともに、何ができていないのか、明確にし、文章を書き直します。

kei344

2020/05/05 09:52

質問は修正できるので、新たな質問を出すのではなくこの質問を修正してください。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは、以下のHTMLで出来ると思います。

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>テスト</title>
6    <link rel="stylesheet" href="css/style-test.css">
7    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
8    <script type="text/javascript" src="jquery.zip2addr.js"></script>
9  </head>
10  <body>
11    <div class="">
12      <h1>お客様情報の入力</h1>
13      <p>お客様の情報を入力いただき、<br>同意して
14        登録内容を確認する」ボタンを押してください</p>
15    <form class="register-input" action="#" method="post">
16      <div class="">
17        <ul class="zipcode-input">
18          <li><span>必須</span>郵便番号</li>
19          <li>郵便番号<input type="text" id="zipcode"  size="8"></li>
20          <li>都道府県<input type="text" id="prefecture"  size="8"></li>
21          <li>市区町村<input type="text" id="address"  size="8"></li>
22        </ul>
23      </div>
24    </form>
25  </div>
26  <script>
27    $('#zipcode').zip2addr({
28	    pref:'#prefecture',
29	    addr:'#address'
30    })    
31  </script>
32  </body>
33</html>