文字列を取り出したい

やりたい事

最初の一文字を入力するとそれに該当する文字列だけを表示するプログラムを作りたい

エラーコード

main.js:392 Uncaught TypeError: prefectlist.forEach is not a function
at HTMLInputElement.<anonymous>

該当HTMLコード

<!DOCTYPE html>
<html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="shortcut icon" href="img/favicon.ico">
  <meta name="description" content="子供から大人まで、プログラミングを学ぶなら
  、Codera">
  <title>準備を済ませたテンプレート</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="css/main.js" defer></script>
</head>

<!-- 本文 -->

<body>

<label>県名の最初の一文字を入力してください<input id="search-word-input" maxlength="1" type="text"></label>
<div id="prefect-list">
  <button data-name="北海道" data-phonetic="ほっかいどう">北海道</button>
  <button data-name="青森" data-phonetic="あおもり">青森</button>
  <button data-name="岩手" data-phonetic="いわて">岩手</button>
  <button data-name="宮城" data-phonetic="みやぎ">宮城</button>
  <button data-name="秋田" data-phonetic="あきた">秋田</button>
  <button data-name="山形" data-phonetic="やまがた">山形</button>

</div>

</body>
</html>

該当javascriptコード

const searchWordText = document.querySelector("#search-word-input");
const prefectlist = document.querySelector("#prefect-list button");
searchWordText.addEventListener('keyup',() => {
  const searchWord = searchWordText.value;
  prefectlist.forEach((element) => {
    if (!searchWord || searchWord === '') {
      element.classList.remove('hide');
      return;
    }
  const perfectName = element.dataset.name;
  const phonetic = element.dataset.phonetic;
  if (
    searchWord.charAt(0) === perfectName.charAt(0) ||
    searchWord.charAt(0) === phonetic.charAt(0)
  ) {
    element.classList.remove('hide');
  }else{
    element.classList.add('hide');
  }
});
});

親切な方、よろしくお願いします

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

回答3件

複数の要素を扱いたいのであればquerySelectorAllを使いましょう。

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

【Document.querySelector() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

投稿2019/06/27 05:47

kei344

総合スコア69407

ベストアンサー

まずはエラーを調べるところからはじめてください。

エラーメッセージの読み方と対処, 検索や質問の原則

あとは機能をドキュメントで調べること。

[Array.prototype.forEach()

](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

ドキュメントから機能を使うための条件が見えてくるはずなので、次はデバッグです。
つまり、使いたい機能に必要な情報が来ているかどうか確認します。

[Chromeのデベロッパーツールで

JavaScriptをデバッグする方法（2019年版）](https://ics.media/entry/190517/)

JavascriptのChromeでのデバッグ方法個人的まとめ2016

ここでどういう情報がきているか分かれば「じゃあどうやれば必要な情報が来るか」を検証します（ドキュメントや検索によって必要な情報が得られる機能を探します）

投稿2019/06/27 05:54

m.ts10806

総合スコア80850

goetai

2019/06/27 11:13

回答ありがとうございます。自分なりにforEachを調べてみました。そこでさらに質問なのですが、このコードのforEachは配列に対して行なっていないのに問題なく処理されているのはどうしてですか？また、if文のリターンはどこに返されているのでしょうか？

m.ts10806

2019/06/27 11:15

「このコード」とはどのことでしょうか？

goetai

2019/06/27 11:33

失礼しました。 javascriptのコードで prefectlist.forEach((element) => { if (!searchWord || searchWord === '') { element.classList.remove('hide'); return; } ここのforEach文の事です

m.ts10806

2019/07/08 06:24

解決されたようですが1週間以上経っているのでちょっとどうなったのか分かりません。「どのように解決に至ったか」コメントいただけませんか？

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

エラーメッセージを読みましょう。
prefectlistはforEach()メソッドを持っていません。

なぜならばdocument.querySelector()で取得されるのは1つの要素だからです。
document.querySelectorAll()で取得したものであればforEach()メソッドを持っています。

投稿2019/06/27 05:50