JavaScriptでテキストエリアの内容からCSSを変更したい
お世話になっております。
データベースからテキストエリアに1行ずつデータを表示し、
そのデータを1行ずつ参照してページ上に表示されているボタンの背景色を
CSSを利用して変更したいと考えているのですがうまくいきません。
データベースはSQLite、
データベースの読み込みとテキストエリア内の表現はPHP、
CSSの変更はJavaScriptを考えております。
HTML
1<html> 2<head> 3<meta charset="utf-8"> 4<title>ページタイトル</title> 5<link rel="stylesheet" type="text/css" href="css.css"> 6</head> 7<body> 8<center> 9<table border><tr><td colspan="2"><div class="img_wrapper"> 10<img src="画像.png" width="750" height="1119"> 11<input type="submit" value="①" class="class1" id="id1"> 12<input type="submit" value="②" class="class2" id="id2"> 13<input type="submit" value="③" class="class3" id="id3"> 14<input type="submit" value="④" class="class4" id="id4"> 15<input type="submit" value="⑤" class="class5" id="id5"> 16<input type="submit" value="⑥" class="class6" id="id6"> 17<input type="submit" value="⑦" class="class7" id="id7"> 18<input type="submit" value="⑧" class="class8" id="id8"> 19<input type="submit" value="⑨" class="class9" id="id9"> 20<input type="submit" value="⑩" class="class10" id="id10"> 21</div></td></tr><tr><td width="240" align="left" valign="top"> 22<textarea rows="6" cols="30" id="テキストエリア"> 23<?php 24$db=new SQLite3('データベースファイル.db'); 25 26$sql_result=$db->query("データベースからデータを取得するコマンド"); 27 28while( $data = $sql_result->fetchArray() ) { 29print $data["名前"]."\n"; 30} 31 32$db->close(); 33?> 34</textarea> 35</td></tr></table> 36 37<script> 38var pattern = '検索対象の文字'; 39 40if(この部分が分かりません){ 41var elem = document.getElementById("テキストエリア"); 42elem.style.background = 'red'; 43} 44</script> 45</body> 46</html>
「この部分が分かりません」の部分には、
「document.getElementById("テキストエリア") == '検索対象の文字'」が入っていました。
if文がなければうまく動作するのですが、if文を追加して
テキストエリアのIDを参照して検索対象の文字からCSSを変更するとなるとうまく動作しません。
また、文字列の一致の問題にも頭を悩ませています。
テキストエリアには
AAA1
AAA2
AAA3
…
のように続くのですが、
AAA1
AAA10
のように「AAA1」を含む二つのデータが同時に存在したときに、それぞれ別のものとして処理したいのですが
その際の一致の書き方も分かりません。
(「AAA1」、「AAA10」をそれぞれ別のものとして背景色を変えたい)
参考にしたページは以下ですが、自分の中でうまく組み合わせることができません。
【PHP】特定の文字列を含むかのチェック
https://qiita.com/kazu56/items/2c72d187438de07c2503
テキストボックスに入力された値を取得する (JavaScript プログラミング)
https://www.ipentec.com/document/javascript-get-textbox-value
【PHP初心者向け】特定の文字列を含むかをチェックする方法
https://blog.codecamp.jp/programming-php-haracter-string
JavaScriptの文字列マッチングまとめ(indexOf, lastIndexOf)
https://qiita.com/aqril_1132/items/9f69575bfbcf24bdf7b5
Javascript:任意の文字列を含むかどうかの確認方法
http://www-creators.com/archives/4537
JavaScriptの文字列マッチングまとめ(indexOf, lastIndexOf)
https://qiita.com/aqril_1132/items/9f69575bfbcf24bdf7b5
初歩的な質問ですが、返信をいただければ大変うれしく思います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/11/30 07:19
2018/11/30 07:22
退会済みユーザー
2018/11/30 07:26
2018/11/30 07:38
退会済みユーザー
2018/11/30 07:38
退会済みユーザー
2018/11/30 07:46
2018/11/30 07:54
退会済みユーザー
2018/11/30 08:16
2018/11/30 08:21
退会済みユーザー
2018/11/30 08:28
2018/11/30 08:30
退会済みユーザー
2018/11/30 08:38