テキストエリア自身を決定ボタンとして扱いたい(フロント)

テキストエリア自身を決定ボタンとして扱いたい

複数のtextarea(テキストボックス)を用意し、ユーザが1つのテキストをクリックした際色が変わって決定されたとみなすフロントを作りたいです。

前提

HTML、CSS、JSで文章生成ホームページを作っています。
複数の文章を生成した後、その中から1つに絞って保存ボタンを押すというフローを考えています。

発生している問題・エラーメッセージ

複数の文章にそれぞれ決定ボタンを別につけるのではなく出力された文章自体を選択して決定ボタンの代わりにしたいのですが、実装がうまくいきません。

イメージ図

該当のソースコード

<body>
  <input type="radio" id="uppercaseRadio" name="mode" value="uppercase" style="display: none;">
  <input type="radio" id="lowercaseRadio" name="mode" value="lowercase" style="display: none;">

  <textarea id="textArea1" rows="4" cols="50">テキストエリア1</textarea>
  <br>
  <textarea id="textArea2" rows="4" cols="50">テキストエリア2</textarea>

  <script>
    // テキストエリア1の参照を取得
    var textArea1 = document.getElementById("textArea1");

    // テキストエリア1が選択された時の処理
    textArea1.addEventListener('focus', function() {
      // 隠しラジオボタンを選択状態にする
      document.getElementById("uppercaseRadio").checked = true;
    });

    // ラジオボタンが変更された時の処理
    document.getElementById("uppercaseRadio").addEventListener('change', function() {
      textArea1.value = textArea1.value.toUpperCase();
    });

    document.getElementById("lowercaseRadio").addEventListener('change', function() {
      textArea1.value = textArea1.value.toLowerCase();
    });

    // テキストエリア2の参照を取得
    var textArea2 = document.getElementById("textArea2");

    // テキストエリア2が選択された時の処理
    textArea2.addEventListener('focus', function() {
      // 隠しラジオボタンを選択状態にする
      document.getElementById("uppercaseRadio").checked = true;
    });

    // ラジオボタンが変更された時の処理
    document.getElementById("uppercaseRadio").addEventListener('change', function() {
      textArea2.value = textArea2.value.toUpperCase();
    });

    document.getElementById("lowercaseRadio").addEventListener('change', function() {
      textArea2.value = textArea2.value.toLowerCase();
    });
  </script>
</body>

試したこと

JSでコードを書いたのですがうまく反映されず...どこが間違っているのか分かりません。

是非お力添えいただければと思います。よろしくお願いします。

int32_t

2023/06/08 07:21

文章で書いてあるやりたいこととコードがまったく一致してないです。「<textarea> をクリックしたら色が変わる」をやりたいのではないのですか? コードの方には色付けする処理がまったくありませんし、toUpperCase() や toLowerCase() はいったいどういう意図なんでしょうか。

Lhankor_Mhy

2023/06/09 06:35

ご質問中の『決定』とは、色が変わること、という理解でいいでしょうか？

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

回答1件

姑息ですがnameの設定で切り分けるとか・・・

javascript
1<style>
2[name=ta]{
3  background-Color:yellow;
4}
5</style>
6<script>
7document.addEventListener('click',({target})=>{
8  if(target.matches('.wrap textarea')){
9    document.querySelector('textarea[name=ta]')?.removeAttribute('name');
10    target.setAttribute('name','ta');;
11  }
12});
13</script>
14<form class="wrap">
15<textarea >テキストエリア1</textarea>
16<textarea >テキストエリア2</textarea>
17<textarea >テキストエリア3</textarea>
18<input type="submit" value="send">
19</form>