Textarea内の文字色を自由に変更できるようにしたいです！

こんにちは、プログラミング初心者です。
現在Monaca(Javascript+HTML5のアプリ開発プラットフォーム)の無料版、ベーシックプランで初めてのアプリ開発をしています。
その中で、Textareaタグを設けており、ユーザー側が何か文字を入力できるようにしてあるのですが、
この文字色をいくつか色の選択肢を作って自由に変更できるようにしたいと思っています。（赤、青。黄、黒、橙など）
そこでネットの知識を集めて以下のようなコードを書いてみました。結果は初めの一色だけ反映されるというものでした。一度色変更のボタンを押すと他の色には戻せなかったです。(下記の例でいうとボタンは二つ反映されましたが、どちらを押しても青にしかならず、そこから他の色に変更もできませんでした。)

<script type="text/javascript">
<!--
function chgColor()
{
  if(document.getElementById)
  {
    document.getElementById("ttttt").style.color = "green";
  document.getElementById("ttttt").style.color = "blue";
  } 
}
// -->  
</script> 
</head>
<body>
<div style="padding:0px 30px 30px 20px " "margin:10px 20px 10px 10px">
<textarea rows="3" cols="30" wrap="hard"
          style="width:300px;height:100px;border-style:none;font-size:x-large;text-align: center;"
          placeholder="Input your message!"
          onchange="Limit(event)" onkeyup="Limit(event)"id="ttttt" >
</textarea>  
</div>
<form>
<input type="button" value="greeeen" onclick="chgColor()">
<input type="button" value="blueeee" onclick="chgColor()">
</form>
</body>
</html>    
※質問の内容に関係のないコードは省略しました。

一色しか変更が反映されない原因と、改善策を究明しております。
最終的には四色ほど選択肢を設置し、自由に何回でも変更可能な状態を目指しています。
よろしくお願いします！

行動規範の内容に同意します

回答3件

ベストアンサー

chgColor関数にthisを渡すと質問者さんの実現したいことが行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div style="padding:0 30px 30px 20px; margin:10px 20px 10px 10px">
9<textarea rows="3" cols="30" wrap="hard"
10          style="width:300px;height:100px;border-style:none;font-size:x-large;text-align: center;"
11          placeholder="Input your message!"
12          onchange="Limit(event)" onkeyup="Limit(event)" id="ttttt">
13</textarea>
14</div>
15<form>
16    <input type="button" value="greeeen" onclick="chgColor(this)">
17    <input type="button" value="blueeee" onclick="chgColor(this)">
18</form>
19<script type="text/javascript">
20    <!--
21    function chgColor(arg) {
22        if (arg.value === "greeeen") {
23            document.getElementById("ttttt").style.color = "green";
24        } else if (arg.value === "blueeee") {
25            document.getElementById("ttttt").style.color = "blue";
26        }
27    }
28    // -->
29</script>
30</body>
31</html>

投稿2017/06/09 10:33

s8_chu

総合スコア14731

anopurihana

2017/06/09 23:48

s8_chuさんご回答ありがとうございます。ご提案いただいた方法で試してみたところ、しっかり反映されました。 if関数の使いかたがまだ覚束ないので、これから勉強していきます。

行動規範の内容に同意します

chgColor()の中で "green" にセットした直後に "blue"にセットしているからです。
どちらのボタンがクリックされても同じ処理に入るので、どちらのボタンからでも青に変わったのでしょう。

以下のように修正したら希望の動作になると思います。
(1) 色を区別できる値をchgColor()の引数に追加する。
(2) その引数の値ごとに条件分岐する。
(3) 分岐した条件に対応する色をセットする。

投稿2017/06/09 13:38

sleepsheep

総合スコア310

anopurihana

2017/06/09 23:46

sleepsheepさんご回答ありがとうございます。原因と改善策が明確でわかりやすいご説明です。仰るようにchgColor()の引数を追加することで解決できました。条件分岐はこれから先も頻繁に使うと思うので、勉強していきます。

行動規範の内容に同意します

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div>
9			<form action="">
10				<p>
11					<textarea id="textarea"></textarea>
12				</p>
13				<p>
14					<input class="chgColor" type="button" value="green" />
15					<input class="chgColor" type="button" value="yellow" />
16					<input class="chgColor" type="button" value="red" />
17					<input class="chgColor" type="button" value="blue" />
18					<input class="chgColor" type="button" value="black" />
19				</p>
20			</form>
21		</div>
22		<script type="text/javascript">
23			let changeColorBtn = document.getElementsByClassName('chgColor');
24			let textarea = document.getElementById('textarea');
25			for (let i = 0; i < changeColorBtn.length; i++) {
26				changeColorBtn[i].addEventListener('click', function () {
27					let color = this.value;
28					textarea.style.color = color;
29				});
30			}
31		</script>
32	</body>
33</html>