HTMLのmailto:機能で本文部分の情報を変更したいです。

Question

いつもお世話になっております。

今回サイトを作成するなかで、HTMLのmailto:機能を使ってメーラを立ち上げている部分があるのですが、
その立ち上がったメーラの中の情報を変更したいと考えております。

具体的には以下のクラス名「type1」「type2」の内容をメーラーの本文に引用したいです。
「type1」「type2」の内容は現在A、Bになっておりますが、ラジオボタン等で内容を選択させjqueryで書き換わる設定にしております。

    <input id="A" type="radio" name="ch1" onclick="sample();" value="A">A
    <input id="A1" type="radio" name="ch1" onclick="sample();" value="A1">A1

    <input id="B" type="radio" name="cc1" onclick="sample()" value="B">B
    <input id="B1" type="radio" name="cc1" onclick="sample()" value="B1">B1

    <br><br>

    type1<div id="type1">選んでください</div>
    type2<div id="type2">選んでください</div>

    <a id="mailto" href="mailto:?body=TYPE1→ここにAを引用したいです%0d%0aTYPE2→ここにBを引用したいです">メールソフトを立ち上げる</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>

        $(function() {

            //type1
            $("#A").on("click", function() {
                $("#type1").text($("#A").val());

            });

            $("#A1").on("click", function() {
                $("#type1").text($("#A1").val());

            });

            //type2
            $("#B").on("click", function() {
                $("#type2").text($("#B").val());

            });

            $("#B1").on("click", function() {
                $("#type2").text($("#B1").val());

            });
        });

        
        
        $(function(){
            $(":radio").on('change', function(){
        
            const a = document.getElementById('mailto');; // <a>要素
            const type1 = document.querySelector('#type1').textContent;
            const type2 = document.querySelector('#type2').textContent;
                a.setAttribute('href', 'mailto:?body=TYPE1→' + encodeURIComponent(type1 + '\nTYPE2→' + type2));

            });
        });

    </script>

調べてはみたのですが、わかりませんでした。。
すみませんが、ご教授いただければ嬉しいです。何卒宜しくお願い申し上げます。

Comments

[kszk311]

＞jqueryで書き換わる設定にしております。
でしたら、jQueryのコードも提示してください。

[退会済みユーザー]

すみません！コードを追記しました。

Answer 1

const a = ...; // <a>要素
const type1 = document.querySelector('.type1').textContent;
const type2 = document.querySelector('.type2').textContent;
a.setAttribute('href', 'mailto:?body=' + encodeURIComponent(type1 + '\n' + type2));

Comments

[退会済みユーザー]

ご回答ありがとうございます！！
すみません。単純にコードを追加して動作確認をしましたが、うまく動作しませんでした。。
ご教授いただいたコードを変更する部分はありますでしょうか？

[wtokuno]

さすがに `const a = ...` の部分は書き換えましたよね？

私が回答した時点より後に 質問内容の HTML が書き換わっているので
`document.querySelector(...)` の部分は適切な内容に書き換えてください。

エラーが出ているんだったらどんなエラーメッセージが出ているか提示してください。

[退会済みユーザー]

ご回答ありがとうございます！
`const a = ...`の部分を書き換えておりませんでした。
申し訳ございません。。どのように変更すれば動作しますでしょうか？；；

`document.querySelector(...)`はidに書き換えました！

[wtokuno]

コピペするだけじゃなくて、内容をちゃんと理解してコードを書いてください。
理解するために調べたりして、それでも分からなければ質問してください。

> `const a = ...`の部分を書き換えておりませんでした。
以下に対応する Element (https://developer.mozilla.org/ja/docs/Web/API/Element) を取得してください。
```html
<a href="mailto:?body=TYPE1→ここにAを引用したいです%0d%0aTYPE2→ここにBを引用したいです">メールソフトを立ち上げる</a>
```

[退会済みユーザー]

ご回答ありがとうございます！
意味も分からず質問してしまい申し訳ございません。

`const a = ...`に<a>タグの要素を取得できるようにコードを書き換えました！

しかしラジオボタンでtype1とtype2の値を選択して
メーラーを立ち上げても 最初に入力していた"選んでください"のテキストが引用されます。

本当は"選んでください"部分がラジオボタン選択で書き換わった値を
メーラーに引用してきたいのですが、どうにもうまくいきません。

度々申し訳ございませんが
ご教授いただければ幸いでございます。

[wtokuno]

私が提示したコードをトップレベルに書くだけではページ表示時に1回しか実行されません。
ラジオボタンが選択されたときに毎回実行されるようにしてください。

[退会済みユーザー]

思い通りの形に実装できました！
根気よくご教授いただき本当にありがとうございました！

実装できたコードは書き換えております！