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

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

ただいまの
回答率

89.07%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 5,070

anopurihana

score 34

こんにちは、プログラミング初心者です。
現在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>    
※質問の内容に関係のないコードは省略しました。


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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+3

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
<div style="padding:0 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(this)">
    <input type="button" value="blueeee" onclick="chgColor(this)">
</form>
<script type="text/javascript">
    <!--
    function chgColor(arg) {
        if (arg.value === "greeeen") {
            document.getElementById("ttttt").style.color = "green";
        } else if (arg.value === "blueeee") {
            document.getElementById("ttttt").style.color = "blue";
        }
    }
    // -->
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/06/10 08:48

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

    キャンセル

+2

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <form action="">
                <p>
                    <textarea id="textarea"></textarea>
                </p>
                <p>
                    <input class="chgColor" type="button" value="green" />
                    <input class="chgColor" type="button" value="yellow" />
                    <input class="chgColor" type="button" value="red" />
                    <input class="chgColor" type="button" value="blue" />
                    <input class="chgColor" type="button" value="black" />
                </p>
            </form>
        </div>
        <script type="text/javascript">
            let changeColorBtn = document.getElementsByClassName('chgColor');
            let textarea = document.getElementById('textarea');
            for (let i = 0; i < changeColorBtn.length; i++) {
                changeColorBtn[i].addEventListener('click', function () {
                    let color = this.value;
                    textarea.style.color = color;
                });
            }
        </script>
    </body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/06/10 08:52

    Kosuke_Shibuyaさん
    ご回答ありがとうございます。
    上の方とはまた違った方法でとても面白いです。まだまだ初心者の身ですので、ご提案いただいたコードについても勉強材料にさせていただきます。
    迅速なご回答感謝いたします。

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/06/10 08:46

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

    キャンセル

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

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

関連した質問

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