●やりたいこと
記入された数字とユーザーIDが一致するユーザーを取得して、
一致したユーザー情報を一覧表示させたいです。
●質問した経緯
search.js、12〜14行目のtargetとuser.idをconsoleに出力すると同じ数字になる事が確認できたのですが、
実装したら'認識できません'のalertが出て抜けてしまいます。
何かアドバイスなど頂けたら幸いです。
よろしくお願いします。
●環境
VScode bootstrap5.0 sqlite3 express
javaScript
1search.js 2 3const searchModule = (() => { 4 const BASE_URL = "http://localhost:3000/api/v1/users" 5 6 return { 7 searchUser: async () => { 8 const res = await fetch(BASE_URL) 9 const users = await res.json() 10 11 document.getElementById('search-btn').addEventListener('click', () => { 12 const target = document.getElementById('search').value 13 const user = users[target - 1] 14 // console.log(user.id) 15 // console.log(target) 16 if (user.id === target) { 17 const body = ` 18 <tr> 19 <th>${users[target - 1].id}</th> 20 <th>${users[target - 1].name}</th> 21 <th>${users[target - 1].kana}</th> 22 <th>${users[target - 1].create_at}</th> 23 <th>${users[target - 1].company}</th> 24 <th>${users[target - 1].address}</th> 25 <th>${users[target - 1].phoneNumber}</th> 26 <th>${users[target - 1].post}</th> 27 <th>${users[target - 1].post2}</th> 28 <th>${users[target - 1].content}</th> 29 </tr>` 30 document.getElementById('search-user').insertAdjacentHTML('beforeend', body) 31 32 } else { 33 alert('認識できません') 34 } 35 }) 36 37 } 38 } 39})()
javaScript
1index.js 2 3const indexModules = (() => { 4 5const path = window.location.pathname 6 7 switch (path) { 8 case '/index.html': 9 return usersModule.fetchAllUsers() 10 11 case '/search.html': 12 return searchModule.searchUser() 13 } 14})()
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="./css/main.css"> 8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 9 <script src="js/search.js" defer></script> 10 <script src="js/index.js" defer></script> 11 <title>ユーザー検索</title> 12</head> 13<body> 14 <div class="container"> 15 16 <div class="mt-5"> 17 <form action="#" id="searching"> 18 <label for="search-btn">削除したいユーザーのIDを入力</label> 19 <input type="text" id="search"> 20 </form> 21 <button id="search-btn" class="btn btn-dark">検索</button> 22 </div> 23 24 <table class="table"> 25 <thead> 26 <tr> 27 <th scope="col" class="col-1">id</th> 28 <th scope="col" class="col-1">名前</th> 29 <th scope="col" class="col-1">かな</th> 30 <th scope="col" class="col-1">送信日時</th> 31 <th scope="col" class="col-1">会社名</th> 32 <th scope="col" class="col-1">メールアドレス</th> 33 <th scope="col" class="col-1">電話番号</th> 34 <th scope="col" class="col-1">住所</th> 35 <th scope="col" class="col-1">建物/ビル名</th> 36 <th scope="col" class="col-3">お問い合わせ内容</th> 37 </tr> 38 </thead> 39 <tbody id="search-user"> 40 41 </tbody> 42 </div> 43</body> 44</html>
sqlite3
11|まさ|masa|2021-05-14 10:32:34|自営業|uihesfb@ne.jp|23456722890|||テスト送信 22|れい|rei|2021-05-14 10:39:05|デザイナー|mlhabriyg@ne.jp|12681298772|||デザインの修正をお願いします 33|たけし|takeshi|2021-05-14 10:40:10|総合衣料タキザワ|biweh;ffw@ne.jp|68197901221|||納品先の変更について 44|まい|mai|2021-05-14 10:55:03|aaa|bitgh;ffw@ne.jp|36352601221|||長文がテキスト欄に治るかどうか検証します。もし治らないようならtableタグを編集するか、bootstrap以外の方法で200文字以上入力できるコンテキストを設定し直して再度作り直す必要があります。もっと文章を書きたいけどあんまり思いつかないのでこれくらいで終わります。ありがとうございました 55|けん|ken|2021-05-14 12:25:55|aaa|bitgh;ffw@ne.jp|36352601221|記入なし|記入なし|テスト 66|ケンちゃん|kenchan|2021-05-14 12:31:02|bbb|mwehs;ffw@ne.jp|090-1212-2121|記入なし|記入なし|テスト 77|ちゃんけん|chanken|2021-05-14 12:58:17|ccc|wkjbflasffw@ne.jp|090-2139-1328|記入なし|記入なし|テストテストテスト
回答1件
あなたの回答
tips
プレビュー