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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

727閲覧

if文が上手く処理できないので教えて欲しいです!

cheetoi

総合スコア10

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/05/19 02:03

●やりたいこと
記入された数字とユーザー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|記入なし|記入なし|テストテストテスト

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2021/05/19 02:07

console.log(user.id) をしているところで console.log(user) をするとどのように表示されますか?
cheetoi

2021/05/19 02:16 編集

int32_tさん回答ありがとうございます! "1"を入力してクリックすると console.log(user) //{id: 1, name: "まさ", kana: "masa", create_at: "2021-05-14 10:32:34", company: "自営業", …} となります!
guest

回答1

0

ベストアンサー

user.id は数値、target は文字列なので、=== で比較すると等しくなりません。

user.id == target にする、user.id === Number(target) にする、などで解決するかと思います。

投稿2021/05/19 02:21

int32_t

総合スコア21695

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cheetoi

2021/05/19 02:32

できました!(泣)ここ文字列になるんですね! 迅速に対応していただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問