JQueryを用いたpタグへの出力

Question

前提・実現したいこと

SelectBoxで選択した文字をpタグに出力し、選択された文字に紐づけされた文字を新たにSelectBoxに出力する。

---

SelectBoxで"初期位置"を選択: SelectBoxがA, Cに変更

SelectBoxでAを選択: 出力: A => B SelectBoxがB, Dに変更
B or D選択で 出力: A => B or A => D

SelectBoxでCを選択: 出力: C => F SelectBoxがD, Fに変更 同上

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

res = res + pushAlp("C", "D", "F") から
res + を抜くと
res = pushAlp("A", "B", "D") が出力されなくなる理由が分からない。

エラーメッセージなし

該当のソースコード

<form id="form7">
  <select id="activeSelect" hidden>
    <option value="">初期位置</option>
    <option value="1st"></option>
    <option value="2nd"></option>
  </select>
</form>

----------------------------------------------------------------------

function pushAlp(stastr1, stastr2, stastr3) {
  $('#activeSelect').attr('hidden', false);
  $('#button2').attr('hidden', false);
  var req = "";
  if ($('#form7 option:selected').text() === stastr1) {
    $('option[value="1st"]').text(stastr2);
    $('option[value="2nd"]').text(stastr3);
  };
  if ($('#form7 option[value="1st"]:selected').text() === stastr2) {
    req = stastr1 + " => " + stastr2;
  };
  if ($('#form7 option[value="2nd"]:selected').text() === stastr3) {
    req = stastr1 + " => " + stastr3;
  };
  return req;
};

----------------------------------------------------------------------

res = pushAlp("初期位置", "A", "C");
res = pushAlp("A", "B", "D");
res = res + pushAlp("C", "D", "F");

return res;

----------------------------------------------------------------------

$('p').text(res);

試したこと

補足情報（FW/ツールのバージョンなど）

利用環境:VS code

Comments

[Lhankor_Mhy]

質問は何ですか？

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2

何ができていて、何ができていないのか（何がわかっていて、何がわからないのか）を書きましょう
https://teratail.com/help/question-tips#questionTips3-5-2

Answer 1

res + を抜くと

res = pushAlp("A", "B", "D") が出力されなくなる理由が分からない。

変数res を上書きしているから。

Comments

[jasmine-jp]

res = pushAlp("A", "B", "D");
res = res + pushAlp("C", "D", "F");

では通り、

res = pushAlp("A", "B", "D");
res = pushAlp("C", "D", "F");

では通らない理由もresを上書きしているからですか？両方resを上書きしているように思えるのですがその違いは何ですか？

[kei344]

> 違いは何ですか？
「res + 」です。「それまで持っていた「res」の中身」と「pushAlp("C", "D", "F")」を「 + 」したもので、「res」を上書きしています。
res = それまで持っていた「res」の中身 + pushAlp("C", "D", "F");

[jasmine-jp]

関数を見てもらえば分かる通りpushAlpの変数stastr1で場合分けしていて、pushAlp("A", "B", "D")かpushAlp("C", "D", "F")のどちらかしか文字列をもてないようにしたつもりなのですが、それまでもっていたresの中身が "" ならばres = res + pushAlp("C", "D", "F") と res = pushAlp("C", "D", "F")は同じではないのですか？

[kei344]

pushAlpの中身は特に関係ありません。関数を実行したら帰り値があります。
res = pushAlp("A", "B", "D");
res = pushAlp("C", "D", "F"); //pushAlp("C", "D", "F")の結果が""ならres に""が入るだけ

[jasmine-jp]

なるほど、何か勘違いしていたようです。