質問: ### 前提・実現したいこと いくつかの項目をhtml上で任意に選択し、結果を並べてテキストエリアに表示させたいと思っています。 また、できればその内容をクリップボードにコピーさせるなどもしたいです。 例: パンを選んでください:プレーン、ゴマ付き、ライ麦 チーズを選んでください:チェダー、アメリカンタイプ、エメンタール、なし 飲み物:あり、なし 自由欄:あいうえお 上記項目をそれぞれ何かしらの方法で選んだ結果... ライ麦 チェダー あり あいうえお となるようにしたいのです。 ご教授ください。
回答: こんな感じにすればチェックボックスが変化した瞬間にテキストエリアに反映することもできます。 ``` パンを選んでください: プレーン、 ゴマ付き、 ライ麦 チーズを選んでください: チェダー、 アメリカンタイプ、 エメンタール、 なし 飲み物: あり、 なし 自由欄: ``` ``` /** @type {HTMLFormElement} */ var formElement = document.querySelector("#food-form"); formElement.addEventListener("change", function(e) { var foods = [ formElement["pan"].value || "", formElement["tizu"].value || "", formElement["nomi"].value || "", formElement["jiyu"].value || "", ]; document.querySelector("#output").value = foods.join("\n"); }); document.querySelector("#copy").addEventListener("click", function (e) { with (document.querySelector("#output")) { selectionStart = 0; selectionEnd = value.length; focus(); } document.execCommand("copy"); alert("クリップボードにコピーしました"); }); ```