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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

5回答

1127閲覧

【JavaScript】inputに入力されたテキストと一致しないp要素を非表示にする方法

_shizu

総合スコア21

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2018/09/24 04:58

編集2019/01/03 14:24

閲覧ありがとうございます。

▼質問
初めてinputへ入力した時に限らず、
入力したものを全て消した後の書き直しなども含め
inputに入力するたび、発火させる方法

▼最終的につくりたいもの
「りんご」「りんごかな」「みかん」「パイナップル」といったp要素があり、
inputに「りんご」と入力された場合、
完全に一致、もしくは部分一致の「りんご」「りんごかな」は表示したままに、
それ以外の「みかん」「パイナップル」には、クラスhiddenを付け非表示にする。

▼問題点
現段階では、実現できているように見えますが、
「りんご」とinputに入力した後、
入力したテキストを一旦全て消し、
新たに「みかん」と打つと、
全く動作しなくなっている状況です。

▼コード
CodePen

参考サイト
javascriptで文字列内に任意の文字列が含まれているかをtrue/falseで返す

▼▼▼以下は、過去のコードと質問です▼▼▼

【2018/09/24のコード】

html

1 <body> 2 <div id="container"> 3[String.indexOfメソッド](https://algorithm.joho.info/programming/javascript/string-partial-match-js/)で文字列の部分一致を判定しようとしていますが、 4その箇所が上手くいっていません。 5 <form action="#"> 6 <input type="text" id="inputText" placeholder="文字を入力してください" onkeyup="addValue()"> 7 <input type="button" value="検索"> 8 </form> 9 <div id="inputTextPv"></div> 10 <div id="parent"> 11 <p>りんご</p> 12 <p>みかん</p> 13 <p>みかん</p> 14 <p>りんご</p> 15 <p>りんご</p> 16 <p>パイナップル</p> 17 </div> 18 </div> 19 <script> 20 // リアルタイムで入力された文字列を取得 21 function addValue(){ 22 var idname = "inputText"; 23 s = document.getElementById(idname).value; 24 var pvname = idname + "Pv"; 25 document.getElementById(pvname).innerHTML = s; 26 } 27 // 比較するp要素を取得 28 var parent = document.getElementById('parent'); 29 var child = parent.children; 30 console.log(child); 31 // 比較するp要素の文字列を取得 ※できない 32 console.log(child.textContents); //undefind 33 console.log(child.innerHTML); //undefind 34 // 入力された文字列とp要素の文字列を比較する ※できない 35 var result = child.search(search); 36 console.log(result); 37 </script> 38</body>

CSS

1/* container */ 2#container { 3 width: 520px; 4 margin: 100px auto; 5} 6/* form */ 7form { 8 font-size: 0; 9} 10input { 11 font-size: 1.4rem; 12 appearance: none; 13 height: 48px; 14} 15input:focus { 16 outline: none; 17} 18input[type="text"] { 19 width: 400px; 20 padding: 0 10px; 21} 22input[type="submit"] { 23 width: 80px; 24 border: none; 25} 26input[type="submit"]:hover { 27 opacity: 0.5; 28} 29/* リアルタイムで入力された文字を表示してみるエリア */ 30#inputTextPv { 31 border: 1px solid red; 32 height: 48px; 33 line-height: 48px; 34 padding: 0 10px; 35} 36/* p要素のエリア */ 37#parent { 38 border: 1px solid blue; 39 padding: 0 10px; 40}

【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のコード】

HTML

1<body> 2<div id="container"> 3 4<form action="#"> 5 <input type="text" id="inputText" placeholder="文字を入力してください"> 6 <input type="button" value="検索"> 7</form> 8<div id="inputTextPv" class="inputTextPv"></div> 9 10 <div id="parent"> 11 <p>りんご</p> 12 <p>みかん</p> 13 <p>みかん</p> 14 <p>りんご</p> 15 <p>りんご</p> 16 <p>パイナップル</p> 17 </div> 18 19 </div> 20<script> 21 (function () { 22 // parentのテキストたちを取得 23 const parent = document.getElementById('parent'); 24 const children = parent.children; 25 for (var child = 0; child < children.length; child++) { 26 // console.log(children[ child ].textContent); 27 child.dataset.value = children[ child ].textContent; 28 } 29 // inputに入力されたテキストをリアルタイムで取得 30 function addValue(e) { 31 var inputText = document.getElementById("inputText"); 32 inputText.addEventListener('keyup', function () { 33 var s = inputText.value; 34 document.getElementById("inputTextPv").textContent = s; 35 }, false); 36 } 37 // inputに入力されたテキストのdata-value属性に設定された値を検索 38 function searchText(text) { 39 return document.querySelectorAll(`[data-value="${text}"]`); 40 } 41 function getList() { 42 const e = document.getElementById('inputText').addEventListener('input'); 43 addValue(); 44 const nodeList = searchText(e.target.value); 45 // inputに入力されたテキストと同じテキストを持つparent内のp要素をConsoleに表示 46 console.log(nodeList); 47 } 48 })(); 49</script> 50</body>

【2018/12/01の修正に関する質問】

●parentのテキストたちを取得 について
ループでdata-value属性に自身のもつテキストノードの値を入れています。
IE11でも動作させたかったのでfor文を用いましたが、「value」に関してエラーが出ておりJSが動かない状態です。
どうすれば良いでしょうか?
エラー文:Uncaught TypeError: Cannot set property 'value' of undefined

●searchText について

HTML

1function searchText(text) {

とありますが、この(text)は何を示しているのでしょうか?
この()は宣言した変数を入れる場所であると思っていたのですが、宣言していない何かも入れることが可能なのでしょうか?
また、

HTML

1return document.querySelectorAll(`[data-value="${text}"]`);

の箇所でテンプレートリテラルを使用しておりますが、
このテンプレートリテラルを用いたdata-value属性を表す書き方を調べても、
同じ書き方が見つかりませんでした。
何かこのようなdata-value属性の書き方の、名称などはありますでしょうか?

●getList について
いただきましたアドバイスでは、アロー関数を使用されていましたが
よく分からなかったのでアロー関数ではない普通の書き方?にしてみました。
正しく書き換えられていますでしょうか?

●最後の行「 })();」 について
この行も、前述した「value」に関してのエラーの対象行のようです。
「JavaScriptは全体を即時関数で囲いつつ、
use strictキーワードで厳密なエラーチェックをすることが推奨されている。」
と知ったので、それも盛り込もうとしていますが、そのせいでしょうか?
こちらのエラーを解消するにはどうすれば良いでしょうか?

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

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

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

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

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

spookybird

2018/09/30 00:28

回答はついているんですが、なにか不満がありますか?
_shizu

2018/09/30 03:43

大変申し訳ございません。 JSの基礎であるNodeの概念やその他専門用語あたりで盛大につまづいておりまして…。 大変恐れ入りますが、もう少し私の方で基礎から勉強し直して、お二人にいただきました回答をもとに、再度挑戦したいと思います。 JSというものは、様々なことが行われているのだと学ぶことができました!ご回答ありがとうございました!
spookybird

2018/09/30 11:33

補足しておきますが、JSの基礎はNodeではありません。JavaScriptがあって、それをブラウザではない環境でも動かそうとしたのがNode.jsです。ブラウザで動かすJSを学ぶのにNodeの知識は一切不要です。
guest

回答5

0

.childrenが返すのはHTMLcollectionなので、配列で返されているはずです。
forなどでcollectionのlengthでループさせてひとつひとつ取り出すと良いです。
↑リンク先はリファレンスです。forで回すサンプルコードもあるので参考にしてください

投稿2018/09/24 05:41

編集2018/09/24 05:42
m.ts10806

総合スコア80765

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

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

0

######parentのテキストたちを取得 について
childは数値ですよ。
######searchText について
仮引数です。
引数 - Wikipedia
属性セレクタです。
属性セレクター - CSS: カスケーディングスタイルシート | MDN
######getList について
ダメだと思います。
e=>{}function(e){}です。
######最後の行「 })();」 について
文法上の問題はないようです。
どのようなことについてお悩みですか?

投稿2018/12/01 10:28

Lhankor_Mhy

総合スコア35860

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

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

_shizu

2018/12/31 12:49 編集

ご回答ありがとうございます。 最後の行に関しましては、parentのテキストたちを取得 について出ていたエラーを修正しましたら、 最後の行に出ていたエラーも一緒に消えました。 「childは数値」というご指摘が参考になりました。 ありがとうございました!
guest

0

テキストノードのままだと扱いづらいので、こんなことやってみると簡単に扱えると思います。

html

1<script> 2 (function() { 3 const parent = document.getElementById('parent'); 4 // ここで取得できるのは parent 要素に含まれる子要素の「Nodeリスト」 5 const children = parent.children; 6 7 // Nodeリストをループするなら for...of が簡単 8 // ただしIE11では動作しない 9 for (let child of children) { 10 // テキストノードのままだと扱いにくいので、いったん data-value 属性に自身のもつテキストノードの値を入れる 11 child.dataset.value = child.textContent; 12 } 13 14 // リアルタイムで入力された文字列を取得 15 function addValue(){ 16 const idname = "inputText"; 17 s = document.getElementById(idname).value; 18 const pvname = idname + "Pv"; 19 document.getElementById(pvname).innerHTML = s; 20 } 21 22 // 受け取った文字列で data-value 属性に設定された値を検索 23 function searchText(text) { 24 return document.querySelectorAll(`[data-value="${text}"]`); 25 } 26 27 document.getElementById('inputText').addEventListener('input', e => { 28 addValue(); 29 const nodeList = searchText(e.target.value); 30 // ご所望のpタグのリストが取れてるはずです 31 console.log(nodeList); 32 }); 33 34 })(); 35</script> 36

投稿2018/09/24 05:44

spookybird

総合スコア1803

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

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

0

変数名が、parentchildだと頭がこんがらがりそうですが、質問のコードにある変数名はそのままにしてあります。

javascript

1 <script> 2 // リアルタイムで入力された文字列を取得 3 function addValue(){ 4 var idname = "inputText"; 5 searchText = document.getElementById(idname).value; 6 // グローバルの配列 textArray から searchText と同じ文字列の場合のみ抽出して新たな配列 newArray に入れていく 7 var newArray = textArray.filter(function(value){ 8 return value === searchText; 9 }); 10 11 if(newArray.length!=0){//newArrayに中身があった場合の処理 12 //いったん parentの中身を全て消す処理 13 while (parent.firstChild) {//parentのfirstChildが存在すれば 14 parent.removeChild(parent.firstChild);//parentのfirstChildを消す 15 } 16 //newArrayの中身の数だけ繰り返しながら 新しく p要素を追加 17 for(var i = 0, len = newArray.length; i < len; ++i){ 18 var element = document.createElement('p');// 新しいp要素を作る 19 element.innerText = newArray[i];//新しいpにテキストを入れる 20 parent.appendChild(element);//parentに要素として追加 21 } 22 } 23 } 24 // 比較するp要素を取得 25 var parent = document.getElementById('parent'); 26 var child = parent.getElementsByTagName('p'); 27 // p要素のinnerTextだけの配列を作る 28 var textArray =[]; 29 for(var i = 0, len = child.length; i < len; ++i){ 30 textArray[i] = child[i].innerText; 31 } 32 </script>

投稿2018/12/01 11:42

colling

総合スコア798

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

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

_shizu

2018/12/31 12:49 編集

ご回答ありがとうございます。 このようなやり方もあるのですね! 勉強になります。 ありがとうございます。
guest

0

自己解決

皆様、ご助言誠にありがとうございました。
以下のコードで実現できました。
(showクラスを外し忘れていただけでした)
皆様から教えていただいたやり方も、
少しずつ理解して行きたいと思います。

▼コード
CodePen

HTML

1<div id="container"> 2 3 <form id="form" action="#"> 4 <input type="text" id="inputText" placeholder="文字を入力してください"> 5 <input type="button" value="検索"> 6 </form> 7 8 <div id="wrapper"> 9 <p>りんご</p> 10 <p>りんごかな</p> 11 <p>みかん</p> 12 <p>みかん</p> 13 <p>りんご</p> 14 <p>りんご</p> 15 <p>パイナップル</p> 16 </div> 17 18</div>

CSS

1.hidden { 2 display: none; 3}

JavaScript

1 (function () { 2 3 'use strict'; 4 5 inputText.addEventListener('keyup', function () { 6 7 var s = inputText.value; 8 console.log(s); 9 10 const wrapper = document.getElementById('wrapper'); 11 const p = wrapper.children; 12 13 for (var i = 0; i < p.length; i++) { 14 p[i].classList.toggle("hidden", p[i].textContent.indexOf(s) === -1 ); 15 } 16 }, false); 17 18})();

参考サイト
Element.classList | MDN(条件によるクラスの追加または除去方法)

投稿2019/01/01 11:49

編集2019/01/02 15:19
_shizu

総合スコア21

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問