質問: 閲覧ありがとうございます。 ▼質問 初めてinputへ入力した時に限らず、 入力したものを全て消した後の書き直しなども含め inputに入力するたび、発火させる方法 ▼最終的につくりたいもの 「りんご」「りんごかな」「みかん」「パイナップル」といったp要素があり、 inputに「りんご」と入力された場合、 完全に一致、もしくは部分一致の「りんご」「りんごかな」は表示したままに、 それ以外の「みかん」「パイナップル」には、クラスhiddenを付け非表示にする。 ▼問題点 現段階では、実現できているように見えますが、 「りんご」とinputに入力した後、 入力したテキストを一旦全て消し、 新たに「みかん」と打つと、 全く動作しなくなっている状況です。 ▼コード CodePen 参考サイト javascriptで文字列内に任意の文字列が含まれているかをtrue/falseで返す ▼▼▼以下は、過去のコードと質問です▼▼▼ 【2018/09/24のコード】 ``` String.indexOfメソッドで文字列の部分一致を判定しようとしていますが、 その箇所が上手くいっていません。 りんご みかん みかん りんご りんご パイナップル ``` ``` /* container */ #container { width: 520px; margin: 100px auto; } /* form */ form { font-size: 0; } input { font-size: 1.4rem; appearance: none; height: 48px; } input:focus { outline: none; } input[type="text"] { width: 400px; padding: 0 10px; } input[type="submit"] { width: 80px; border: none; } input[type="submit"]:hover { opacity: 0.5; } /* リアルタイムで入力された文字を表示してみるエリア */ #inputTextPv { border: 1px solid red; height: 48px; line-height: 48px; padding: 0 10px; } /* p要素のエリア */ #parent { border: 1px solid blue; padding: 0 10px; } ``` 【2018/09/24の修正に関する質問】 **【実現したいこと】** ページ内検索で、検索した文字を含むp要素のみを表示し、それ以外のp要素は非表示にしたいです。 また、「検索」のボタンを押さずとも、入力した時点ですでに上記の状態となるようにしたいです。 **※なるべくjQueryは使わず、ネイティブJSで作れると嬉しいです。** **【現状】** ●できていること ・検索のテキストボックスに入力された文字の取得 ・p要素の取得 ●できていないこと ・p要素の文字列の取得(これができないと、入力された文字列との比較は不可能?) p要素の文字列を取得できそうに思える、.textContents と .innerHTML を試しましたが、どちらもundefindでした。他の方法も探したのですが、見つけることができませんでした。 ・入力された文字列と、p要素の文字列の比較 p要素の文字列が取得できていないので、この段階まで辿り着けていないのですが、search を使うと検索をして一致した位置を「数値」で返してくれるとのことなので、その数値を使ってp要素の表示/非表示を切り替えられるのではないかと考えています。 ・該当p要素の表示と、それ以外のp要素の非表示 display: block / none; でできるのではないかと考えています。 --- 【2018/12/01のコード】 ``` りんご みかん みかん りんご りんご パイナップル ``` 【2018/12/01の修正に関する質問】 **●parentのテキストたちを取得 について** ループでdata-value属性に自身のもつテキストノードの値を入れています。 IE11でも動作させたかったのでfor文を用いましたが、「value」に関してエラーが出ておりJSが動かない状態です。 どうすれば良いでしょうか? エラー文:Uncaught TypeError: Cannot set property 'value' of undefined **●searchText について** ``` function searchText(text) { ``` とありますが、この(text)は何を示しているのでしょうか? この()は宣言した変数を入れる場所であると思っていたのですが、宣言していない何かも入れることが可能なのでしょうか? また、 ``` return document.querySelectorAll(`[data-value="${text}"]`); ``` の箇所でテンプレートリテラルを使用しておりますが、 このテンプレートリテラルを用いたdata-value属性を表す書き方を調べても、 同じ書き方が見つかりませんでした。 何かこのようなdata-value属性の書き方の、名称などはありますでしょうか? **●getList について** いただきましたアドバイスでは、アロー関数を使用されていましたが よく分からなかったのでアロー関数ではない普通の書き方?にしてみました。 正しく書き換えられていますでしょうか? **●最後の行「 })();」 について** この行も、前述した「value」に関してのエラーの対象行のようです。 「JavaScriptは全体を即時関数で囲いつつ、 use strictキーワードで厳密なエラーチェックをすることが推奨されている。」 と知ったので、それも盛り込もうとしていますが、そのせいでしょうか? こちらのエラーを解消するにはどうすれば良いでしょうか?
回答: .childrenが返すのはHTMLcollectionなので、配列で返されているはずです。 forなどでcollectionのlengthでループさせてひとつひとつ取り出すと良いです。 ↑リンク先はリファレンスです。forで回すサンプルコードもあるので参考にしてください