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

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

ただいまの
回答率

88.59%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 445

mas_matix

score 14

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

お世話になっております。

データベースからテキストエリアに1行ずつデータを表示し、
そのデータを1行ずつ参照してページ上に表示されているボタンの背景色を
CSSを利用して変更したいと考えているのですがうまくいきません。

データベースはSQLite、
データベースの読み込みとテキストエリア内の表現はPHP、
CSSの変更はJavaScriptを考えております。

<html>
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<center>
<table border><tr><td colspan="2"><div class="img_wrapper">
<img src="画像.png" width="750" height="1119">
<input type="submit" value="①" class="class1" id="id1">
<input type="submit" value="②" class="class2" id="id2">
<input type="submit" value="③" class="class3" id="id3">
<input type="submit" value="④" class="class4" id="id4">
<input type="submit" value="⑤" class="class5" id="id5">
<input type="submit" value="⑥" class="class6" id="id6">
<input type="submit" value="⑦" class="class7" id="id7">
<input type="submit" value="⑧" class="class8" id="id8">
<input type="submit" value="⑨" class="class9" id="id9">
<input type="submit" value="⑩" class="class10" id="id10">
</div></td></tr><tr><td width="240" align="left" valign="top">
<textarea rows="6" cols="30" id="テキストエリア">
<?php
$db=new SQLite3('データベースファイル.db');

$sql_result=$db->query("データベースからデータを取得するコマンド");

while( $data = $sql_result->fetchArray() ) {
print $data["名前"]."\n";
}

$db->close();
?>
</textarea>
</td></tr></table>

<script>
var pattern = '検索対象の文字';

if(この部分が分かりません){
var elem = document.getElementById("テキストエリア");  
elem.style.background = 'red';
}
</script>
</body>
</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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

 sample

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

A1
A2


A3
A10
A11
A12
</textarea><hr>
<input type="button" class="zaseki" value="A1">
<input type="button" class="zaseki" value="A2">
<input type="button" class="zaseki" value="A3">
<input type="button" class="zaseki" value="A3">
<input type="button" class="zaseki" value="A4">
<input type="button" class="zaseki" value="A5"><br>
<input type="button" class="zaseki" value="A6">
<input type="button" class="zaseki" value="A7">
<input type="button" class="zaseki" value="A8">
<input type="button" class="zaseki" value="A9">
<input type="button" class="zaseki" value="A10"><br>
<input type="button" class="zaseki" value="A11">
<input type="button" class="zaseki" value="A12">
<input type="button" class="zaseki" value="A13">
<input type="button" class="zaseki" value="A14">
<input type="button" class="zaseki" value="A15">

 訂正

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

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

 原点に戻って

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/30 17:28

    そうですね!
    AAA1~AAA10は、
    座席1~座席10…、
    のようになっています。

    ボタンにもidが全部振り分けられていて、
    seki1N、seki2N…
    のようになっています。

    仕様を変更してもいいんですけど、環境依存文字になるので
    あまりそういうことはしたくないです。

    キャンセル

  • 2018/11/30 17:30

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

    キャンセル

  • 2018/11/30 17:38

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

    大変助かりました!!

    キャンセル

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

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る