カンマ区切りの文字列を逆順で表示させたい

Question

質問失礼します。

当方、JavaScript の知識はほぼ無いに等しいのですが、
どうしても明日までに自分で対応せざるを得ない案件が発生し、
自分で調べて試行錯誤しても解決できなかったため、
どなたかにお助けいただけないかと思い投稿させていただきました。

実現したいことは、

現状、下記のようになっているコードを、

<address class="ms__address">
太郎 田中, 1-1-1, 中央区, 東京都, 111-1111
<address>

下記のように逆順で表示させたいです。

<address class="ms__address">
111-1111, 東京都, 中央区, 1-1-1, 田中 太郎
<address>

自分なりに考えた結果、
①まず文字列を取得し、
②その文字列を配列に変換し、
③その配列を逆順にし、
④それをまたカンマ区切りの文字列に変換し、
⑤それを表示できるよう試みました。

const addressLetter = document.querySelector(".ms__address");
const addressArray = addressLetter.split(",");
const addressReverse = addressArray.reverse();　
const addressArray = addressReverse.join(",");
document.querySelector(".ms__address").textContent = addressReverse;

頓珍漢なコードでしょうか。
お恥ずかしい限りです。

どこが間違っているかわからず、これ以上どうすればよいかもわからない状況です。
恐れ入りますが、ご教示いただければ幸いです。
お手数お掛けしますが、何卒よろしくお願いいたします。

Answer 1

まずブラウザで動かしてるのであればF12とかでconsoleを見たほうがいいと思います。
考え方はあってると思うので、どこで間違ってるのか、console.logなどを使って確認していけば、たどり着くように思います。

const addressLetter = document.querySelector(".ms__address");
console.log('addressLetter', addressLetter);

const addressArray = addressLetter.split(",");
console.log('addressArray', addressArray);
:

パッと見、最初のコードに.textContentが抜けてるように思います。

Comments

[bluemarron]

自分が浅学なために、ご迷惑をお掛けしました。
お教えいただき、本当に有り難うございました。
おかげさまで解決できました。
重ねて感謝申し上げます。

Answer 2

const addressLetter = document.querySelector(".ms__address");

文字列を取得するなら

const addressLetter = document.querySelector(".ms__address").textContent;

です。

const addressArray = addressReverse.join(",");
document.querySelector(".ms__address").textContent = addressReverse;

addressArrayを2回定義しているためエラーになります。
そしてセットする変数が違っていますね。

const addressArray2 = addressReverse.join(",");
document.querySelector(".ms__address").textContent = addressArray2;

これで行けるかと思います。

---

あと、HTMLのほうでは</address>であるべきところが<address>になっています。

Comments

[bluemarron]

迅速・丁寧にご回答いただき、誠に有り難うございます。
ご教示いただいた通り試みたところ、解決することができました！
本当に助かりました、感謝いたします。