テキストエリア自身を決定ボタンとして扱いたい
複数の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でコードを書いたのですがうまく反映されず...どこが間違っているのか分かりません。
是非お力添えいただければと思います。よろしくお願いします。