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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

716閲覧

JavaScriptでテキストエリアの内容からCSSを変更したい

退会済みユーザー

退会済みユーザー

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2018/11/30 07:12

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

初歩的な質問ですが、返信をいただければ大変うれしく思います。

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

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

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

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

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

guest

回答1

0

ベストアンサー

一つのテキストエリア内で背景色を切り替えることはできません

sample

javascript

1<script> 2$(function(){ 3 var text=$('#ta1').val().replace(/^\n+|\n+$/mg,"").replace(/\n+/mg,"|"); 4 var reg=new RegExp("^("+text+")$"); 5 $('.zaseki').filter(function(){return $(this).val().match(reg);}).css('background-Color','red'); 6}); 7</script>

HTML

1<textarea id="ta1"> 2 3A1 4A2 5 6 7A3 8A10 9A11 10A12 11</textarea><hr> 12<input type="button" class="zaseki" value="A1"> 13<input type="button" class="zaseki" value="A2"> 14<input type="button" class="zaseki" value="A3"> 15<input type="button" class="zaseki" value="A3"> 16<input type="button" class="zaseki" value="A4"> 17<input type="button" class="zaseki" value="A5"><br> 18<input type="button" class="zaseki" value="A6"> 19<input type="button" class="zaseki" value="A7"> 20<input type="button" class="zaseki" value="A8"> 21<input type="button" class="zaseki" value="A9"> 22<input type="button" class="zaseki" value="A10"><br> 23<input type="button" class="zaseki" value="A11"> 24<input type="button" class="zaseki" value="A12"> 25<input type="button" class="zaseki" value="A13"> 26<input type="button" class="zaseki" value="A14"> 27<input type="button" class="zaseki" value="A15">

訂正

上記jQuery版でしたので通常のjsに書き下しました

javascript

1window.addEventListener('DOMContentLoaded', function(e){ 2 var text=document.querySelector('#ta1').value.replace(/^\n+|\n+$/mg,"").replace(/\n+/mg,"|"); 3 var reg=new RegExp("^("+text+")$"); 4 [].filter.call(document.querySelectorAll('.zaseki'),function(x){ 5 return x.value.match(reg); 6 }).forEach(function(x){ 7 x.style.backgroundColor='red'; 8 }); 9});

原点に戻って

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var text=document.querySelector('#ta1').value.replace(/id/mg,"").replace(/AAA/mg,"id").replace(/^\n+|\n+$/mg,"").replace(/\n+/mg,"|"); 4 console.log(text); 5 var reg=new RegExp("^("+text+")$"); 6 [].filter.call(document.querySelectorAll('[id^=id]'),function(x){ 7 return x.id.match(reg); 8 }).forEach(function(x){ 9 x.style.backgroundColor='red'; 10 }); 11}); 12</script> 13<textarea id="ta1"> 14AAA1 15AAA2 16AAA3 17AAA10 18</textarea><hr> 19<input type="submit" value="(1)" id="id1"> 20<input type="submit" value="(2)" id="id2"> 21<input type="submit" value="(3)" id="id3"> 22<input type="submit" value="(4)" id="id4"> 23<input type="submit" value="(5)" id="id5"><br> 24<input type="submit" value="(6)" id="id6"> 25<input type="submit" value="(7)" id="id7"> 26<input type="submit" value="(8)" id="id8"> 27<input type="submit" value="(9)" id="id9"> 28<input type="submit" value="(10)" id="id10"><br> 29

投稿2018/11/30 07:17

編集2018/11/30 08:29
yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2018/11/30 07:19

返信、ありがとうございます。 1つのテキストエリアの内容を参照して、ページ上に複数あるボタンの背景色を変えることはできないということなのでしょうか? それならば、SQLiteで読み込む段階でボタンの数だけ変数を取って、その変数が0もしくは1であればそれぞれボタンの背景色を変える、ということは可能なのでしょうか?
yambejp

2018/11/30 07:22

> 1つのテキストエリアの内容を参照して、ページ上に複数あるボタンの背景色を変える ならできそうですね。しかしテキストエリア内のAAA1,2,3・・・10とボタンとを 関連付ける情報がほとんどないので、回答できません。 テキストエリアの情報がどうだったら、どういうロジックでボタンを特定して どういう色に変更するのでしょうか?
退会済みユーザー

退会済みユーザー

2018/11/30 07:26

すみません、情報不足でした。 実は、画像の上にCSSでボタンを配置しており、画像は室内図となっております。 ボタンは座席を表現しており、室内にあるどの椅子が現在使用中なのかをページ上で表示するためにこのような手法を取っております。 テキストエリア内には座席の番号、 ボタンにも座席の番号(こちらは丸の中に数字)、 色は赤色で表現する予定です。
yambejp

2018/11/30 07:38

sampleあげておきました、仕様が違うようならご指示下さい
退会済みユーザー

退会済みユーザー

2018/11/30 07:38

データベースからテキストエリアに表示された内容は 「 座席1 座席2 … 」 のように1行ずつ座席の番号が表示されます。 その表示された情報を1行1行参照して、ページ上にあるボタンの背景色を変えたいと考えております。
退会済みユーザー

退会済みユーザー

2018/11/30 07:46

サンプル、ありがとうございます。 こちらの環境では、普段通りテキストエリアとボタンが表示されるのみでボタンの背景色は変わってないようです。 何か、こちらで追加する記述があるのでしょうか? 実行ブラウザはGoogle Chromeの最新版です。
yambejp

2018/11/30 07:54

すみません、jQueryを前提にかいてしまっていたので通常のjs版を追記しておきました
退会済みユーザー

退会済みユーザー

2018/11/30 08:16

編集版のソースもありがとうございます。 大変助かっております。 編集版のソースを実行したところ、確かに背景色が赤く表示されました。 しかし、こちらの情報不足だったところもあり、どうやらこのソースは 「テキストエリアとボタンの表記が一致している場合のみ赤く表示される」ようです。 私が予定したのは、テキストエリアの内容は 「 座席1 座席2 … 」 という感じですが、ボタンの表記は環境依存文字の 「①」、「②」…という感じです。 表記が一致しない場合には、それぞれ判別式を書いて判定させる必要があるのでしょうか? もしそうだとしても、書き方や考え方が分かりません...。 最悪、テキストエリアとボタンの表記を一致させる仕様にできないか検討してみます。
yambejp

2018/11/30 08:21

もとのソースに立ち返って・・ AAA1~AAA10は確定でよいですか? ボタンにはid1~10のidが振ってあるのも確定でよいですか? そうであればAAAの後ろについている数値でidを指定してやることは可能です 仕様を確認の上、状況を報告下さい
退会済みユーザー

退会済みユーザー

2018/11/30 08:28

そうですね! AAA1~AAA10は、 座席1~座席10…、 のようになっています。 ボタンにもidが全部振り分けられていて、 seki1N、seki2N… のようになっています。 仕様を変更してもいいんですけど、環境依存文字になるので あまりそういうことはしたくないです。
yambejp

2018/11/30 08:30

AAAからidを指定する方法で書き直しました 環境依存文字の方はvalueを参照しなくなったで気にしなくて大丈夫です
退会済みユーザー

退会済みユーザー

2018/11/30 08:38

ありがとうございました!! 考えている通りのものができました!! 座席1、座席10という同じ範囲を含むデータがあってもそれぞれ個別に処理してくれます!! 大変助かりました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問