選択した項目（複数）をテキストエリアに表示させる方法

Question

前提・実現したいこと

いくつかの項目をhtml上で任意に選択し、結果を並べてテキストエリアに表示させたいと思っています。
また、できればその内容をクリップボードにコピーさせるなどもしたいです。

例：

パンを選んでください：プレーン、ゴマ付き、ライ麦
チーズを選んでください：チェダー、アメリカンタイプ、エメンタール、なし
飲み物：あり、なし
自由欄：あいうえお

上記項目をそれぞれ何かしらの方法で選んだ結果…

ライ麦
チェダー
あり
あいうえお

となるようにしたいのです。
ご教授ください。

Comments

[x_x]

試したコードはないのでしょうか？

Answer 1

こんな感じにすればチェックボックスが変化した瞬間にテキストエリアに反映することもできます。
https://jsbin.com/sesiropaka/edit?html,js,output

    <form action="" id="food-form">
        <p>
            パンを選んでください：
            <label>
                <input type="radio" name="pan" value="プレーン">プレーン、</label>
            <label>
                <input type="radio" name="pan" value="ゴマ付き">ゴマ付き、</label>
            <label>
                <input type="radio" name="pan" value="ライ麦">ライ麦</label>
        </p>
        <p>
            チーズを選んでください：
            <label>
                <input type="radio" name="tizu" value="チェダー">チェダー、</label>
            <label>
                <input type="radio" name="tizu" value="アメリカンタイプ">アメリカンタイプ、</label>
            <label>
                <input type="radio" name="tizu" value="エメンタール">エメンタール、</label>
            <label>
                <input type="radio" name="tizu" value="なし">なし</label>
        </p>
        <p>
            飲み物：
            <label>
                <input type="radio" name="nomi" value="あり">あり、</label>
            <label>
                <input type="radio" name="nomi" value="なし">なし</label>
        </p>
        <p>
            自由欄：
            <input type="text" name="jiyu">
        </p>
    </form>
    <p>
        <textarea id="output" rows="10"></textarea>
    </p>
    <p>
        <input type="button" value="copy" id="copy">
    </p>

/** @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("クリップボードにコピーしました");
});

Comments

[abetak5150]

リンク先を確認させていただきました。
想定していた通りで素晴らしいです。

ただ、実際に実装してみると以下のエラーが表示されてうまく動作しませんでした。

「オブジェクトは querySelector プロパティまたはメソッドをサポートしていません。」

と表示されます。
原因及び対処法はお分かりになりますでしょうか。

エディタはez-HTML、ブラウザはchromeを使用しています。

[sagami1991]

`document.querySelector`メソッドは古いブラウザでもだいたい対応してるはずです。（chromeなら1から、IEならIE8から）
そして、「プロパティまたはメソッドをサポートしていません」というエラーはたしかIEの文言のはずです。
chromeでhtmlを開けば正しく実行されると思いますが。

[sagami1991]

それか、JSの挿入タイミングの問題かもしれません。
yamabeJPさんの回答のように、`window.addEventListener('DOMContentLoaded', function(e){`
で包むか、またはスクリプトタグをhtmlの最後らへん（</body>の直上）に定義すると治るかもしれません。

[abetak5150]

ありがとうございます。
やはり、いろいろ試しましたが(html内に記載、外部に設置)エラーになってしまうようです。

[Lhankor_Mhy]

横からすみません。

Chrome で「オブジェクトは querySelector プロパティまたはメソッドをサポートしていません。」というエラーメッセージは出なさそうな気がします。ググって見た感じ、IEのエラーメッセージのようなのですが、ご使用ブラウザは本当に Chrome でしょうか。
あるいは、IEtab のようなアドオンを使っていませんか？

[abetak5150]

ありがとうございます。

「オブジェクトは querySelector プロパティまたはメソッドをサポートしていません。」

はエディタ(ez-html)で表示されます。
chromeでエラーは表示されませんが、動作していないようです。

[sagami1991]

そのエディタ(ez-html)の内蔵ブラウザのバージョンがとても古いことが原因と思われます。
chromeで動作しないのは他の原因であり、chrome上で右クリックし、「検証」を押すことでエラーログが見れるかと思います。
そしておそらく原因はjsの実行順序の関係だと思ってます。

[abetak5150]

大変お騒がせしました。
記載の位置を変更したら動作しました。
本当にありがとうございました。

Answer 2

こんな感じです

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#check').addEventListener('click',function(e){
    var pan=(document.querySelector('[name=pan]:checked')||{value:""}).value;
    var tizu=(document.querySelector('[name=tizu]:checked')||{value:""}).value;
    var nomi=(document.querySelector('[name=nomi]:checked')||{value:""}).value;
    var jiyu=document.querySelector('[name=jiyu]').value;
    document.querySelector('#output').value=pan+"\n"+tizu+"\n"+nomi+"\n"+jiyu;
  });
  document.querySelector('#copy').addEventListener('click',function(e){
    with(document.querySelector('#output')){
      selectionStart=0;
      selectionEnd=value.length;
      focus();
    }
    document.execCommand('copy');
  });
});

<p>
パンを選んでください：
<label><input type="radio" name="pan" value="プレーン">プレーン、</label>
<label><input type="radio" name="pan" value="ゴマ付き">ゴマ付き、</label>
<label><input type="radio" name="pan" value="ライ麦">ライ麦</label>
</p>
<p>
チーズを選んでください：
<label><input type="radio" name="tizu" value="チェダー">チェダー、</label>
<label><input type="radio" name="tizu" value="アメリカンタイプ">アメリカンタイプ、</label>
<label><input type="radio" name="tizu" value="エメンタール">エメンタール、</label>
<label><input type="radio" name="tizu" value="なし">なし</label>
</p>
<p>
飲み物：
<label><input type="radio" name="nomi" value="あり">あり、</label>
<label><input type="radio" name="nomi" value="なし">なし</label>
</p>
<p>
自由欄：<input type="text" name="jiyu">
</p>
<p>
<input type="button" value="check" id="check">
</p>
<p>
<textarea id="output" rows="10">
</textarea>
</p>
<p>
<input type="button" value="copy" id="copy">
</p>