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

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

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

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

if

if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1060閲覧

classの追加/削除で文字列検索をしたい

KoTT

総合スコア19

for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

if

if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/27 08:34

編集2020/02/27 08:41

hideのクラス追加/削除で文字列検索をしたいのですが、if文の途中で下記エラーがでます。
if文をコメントアウトすると正常に動作するので、for文は動いていると思います。

/**エラー内容 Uncaught TypeError: Cannot read property 'remove' of undefined at HTMLButtonElement.searchWord */ /** * 文字列検索機能を追加する * @param{string} searchStringsValue = searchCharacterStrings.value 検索文字列の取得 * @param{string} targetDiv = 検索対象の文字列取得 * @param{function} searchWord() ボタンクリックで発火。検索文字列の取得、検索対象div全てに一旦class hideを加え、検索にマッチしたものからhideを削除してフィルタリング * */ <style> .hide { visibility: hidden; } </style> <script> const searchButton = document.getElementById('search'); searchButton.addEventListener('click', searchWord, false); function searchWord() { let searchStringsValue = document.getElementById('searchStrings').value; let targetDiv = document.querySelectorAll('#targetText .targetclass'); let targetPTag = document.querySelectorAll('#targetText .targetclass p'); for (let i = 0; i < targetDiv.length; i++) { let targetDivClassList = targetDiv[i].classList; targetDivClassList = targetDivClassList.add('hide'); if (targetPTag[i].textContent.match(new RegExp(searchStringsValue))) { targetDiv[i].classList = (targetDivClassList + targetDivClassList.remove('hide')); } else { targetDiv[i].classList = targetDivClassList; } } } </script>

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

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

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

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

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

kei344

2020/02/27 08:36

「エラーがでます」では無く、エラー文を具体的にコードブロックで質問文に追記ください。
guest

回答3

0

js

1 let targetDivClassList = targetDiv[i].classList; 2 targetDivClassList = targetDivClassList.add('hide'); 3// ↑ addの返り値が入る(返り値がないのでundefinedが入っていると思われる) 4 if (targetPTag[i].textContent.match(new RegExp(searchStringsValue))) { 5 targetDiv[i].classList = (targetDivClassList + targetDivClassList.remove('hide')); 6// ↑ undefinedだが、もしclassListが入っていても「+」では連結できない。 7// ↑ (追記)そもそもclassList に代入できない 8 } else { 9 targetDiv[i].classList = targetDivClassList; 10 }

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

【Element.classList - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/classList

Element.classList は読み取り専用のプロパティで、生きた DOMTokenList コレクションでその要素の class 属性を返します。

投稿2020/02/27 08:46

編集2020/02/27 08:56
kei344

総合スコア69364

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

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

0

targetDivClassList.add('hide')undefinedを返します。

なし。

DOMTokenList.add() - Web API | MDN


解決方法ですが、代入しなければいいのでは?

投稿2020/02/27 08:47

Lhankor_Mhy

総合スコア35860

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

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

KoTT

2020/02/27 09:24 編集

すいません。DOMTokenListとはなんでしょうか?ググっても初心者用のサイトがないので、教えていただければ助かります。直訳すると、'DOMという仕組みの''データを最小の構成単位に分解したもの'の'リスト'という翻訳になるのかと思いますが、、なにを示しているのか理解ができません。
Lhankor_Mhy

2020/02/27 10:34

kei344さんのご回答が詳しいです。 というか、細かいことは気にせず、代入をやめればいいんですよ。
guest

0

自己解決

指摘に従って、classListを使わずにclassNameでやったら動作しました。
理解していません。classListは =代入(=)を使うとエラーがでるようです。

/** * 文字列検索機能を追加する * @param{string} searchStringsValue = searchCharacterStrings.value 検索文字列の取得 * @param{string} targetDiv = 検索対象のDiv取得 * @param{function} searchWord() ボタンクリックで発火 >> 検索文字列の取得 >> 検索対象のDiv取得 * >> (Divのclass{hide}を削除=リセット) >> Divのclass{hide}を追加 >> 検索にマッチしたDivのclass{hide}を削除してフィルタリング * * */ const searchButton = document.getElementById('search'); searchButton.addEventListener('click', searchWord, false); function searchWord() { let searchStringsValue = document.getElementById('searchStrings').value; let targetDiv = document.querySelectorAll('#targetText .targetclass'); for (let i = 0; i < targetDiv.length; i++) { targetDiv[i].classList.remove('hide'); let targetDivClassName = targetDiv[i].className; targetDivClassName = targetDivClassName.replace(/$/, ' hide'); if (targetDiv[i].textContent.match(new RegExp(searchStringsValue))) { targetDiv[i].className = targetDivClassName.replace(/(\s)hide($)/, ''); } else { targetDiv[i].className = targetDivClassName; } } }

投稿2020/02/27 12:21

KoTT

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問