ユーザー情報が変更された際に、変更されましたとアラートを表示させたい。

Question

ユーザー情報変更ページ→edit.balde.phpからユーザー情報を変更し、
その後、ユーザー情報ページshow.balde.phpに画面遷移した際に、
変更が完了しました！とアラートを表示する機能を実装したいのですが、
showbalde.phpを表示したら、
検証ツールで
Uncaught ReferenceError: observer is not defined
at window.onload (
とエラーが表示される状態です。
observerが定義されていない？

observer.observe(elem, config);

の行の記述がおかしいのでしょうか？

記述内容

〜省略〜
<script>
  window.onload = function() {
    // 変更を監視するノードを選択
    const element = document.getElementById('name');

    // オブザーバーの設定
    const config = {
        attributes: true, //属性の変化を監視
        childList: true,  //子要素リストの変化を監視
        characterData: true,  //文字データの変化を監視
        characterDataOldValue: true,  //変更前の文字データを使用
    };
    // MutationObserverでDOMの変更時にコールバック関数を実行する
    const mo = new MutationObserver(function() {
    //実行する処理
    alert('変更が完了しました');
    });
    //監視をスタートする
    observer.observe(element, config);
    };
</script>
〜省略〜
<div>
   <p>氏名</p>
   <div>
       <span id="name">{{ Auth::user()->name }}</span>
   </div>
</div>
〜省略〜

記述方法等問題ありますでしょうか？

Comments

[iiii]

Lhankor_Mhyさん
window.aoload = function ()を記述し#nameをnameに変更後確認したら、
//と表示されその下にundefinedと表示されています。
undefinedしか表示されていないということは、
var observer = new MutationObserver(function(){

alert('変更が完了しました');
});

の記述が読み込まれていないからでしょうか？

[Lhankor_Mhy]

回答へのコメントは、回答のコメント欄に書いた方がいいです。
ここに書かれても通知が来ないので、気が付かない可能性があります。

---

状況がよくわからないです。
「//と表示されその下にundefinedと表示されています」とのことですが、表示とはどこに表示されているのですか？

[iiii]

すいません、質問内容変更いたしました。

[Lhankor_Mhy]

問題を把握しました。

Answer 1

この質問と同じ問題だと思います。

ボタンをクリックしてもイベントが発生しない

---

typoもありますね。
document.getElementById('#name')→document.getElementById('name')

---

質問の変更に合わせて追記

observerが定義されていない？

ご認識の通りです。変数observer を定義してください。変数mo と混同しているように見えます。

Comments

[iiii]

ご返答ありがとうございます！
const mo から const observer　に変更した所、
エラー表示は出なくなりましたが、
文字を変更したのに、変更が完了しました。
のアラートが表示されない状態です。

configのcharacterData: true, //文字データの変化を監視
　　　characterDataOldValue: true, //変更前の文字データを使用
の記述で<span id="name">{{ Auth::user()->name }}</span>
の内容が変更(更新）されたらアラートが出る認識で記述しているのですが、
どこか間違っているのでしょうか？

[Lhankor_Mhy]

内容が変更される部分が記述されていないので何とも言えない感じですが、ご提示の JavaScript を当方で試してみたところ、（moの部分を修正した上で）問題なく動作しました。

おそらく、ここに書かれていないコードに原因があるのだと思います。

[Lhankor_Mhy]

もしかして、PHPでの出力が MutationObserver で検出できるとお考えでしたら、それは違います。念のため。

[iiii]

PHPでの出力が MutationObserver で検出できるとお考えでしたらそれは違います→(それは認識不足でした、、、)
↓
show.blade.phpの<span id="name">{{ Auth::user()->name }}</span>
の変更を検知したい。
↓
{{ Auth::user()->name }}はPHPでDBから値を取得しているので、
検知されない。という認識で間違いないでしょうか？