DOM操作でのTextcontent上書きが元の値に戻ってしまう

前提・実現したいこと

htmlのspan要素の内容をjavascriptのdom操作で上書きしたい

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

inputタグの入力情報を取得して上書きしたいspanタグのTextcontentに
代入しても、spanタグに初期値として設定している"player1"を上書きすることができない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>Document</title>
9</head>
10<body>
11    <div id="grand-container">
12        <div id="container">
13            <div class="field">
14                <div class="player">
15                    <div class="player__icon"></div>
16                    <!-- 上書きをしたい要素 -->
17                    <span class="player__name">player1</span>
18                    <!-- 上書きしたい内容を記入するform -->
19                    <form class="player__name--form" action="">
20                        <input type="text" class="player__name--input" id="playerName"　size="15">
21                    </form>
22                </div>
23            </div>
24        </div>
25    </div>
26    <script src="js/playerName.js"></script>
27    <!-- <script src="js/playerMove.js"></script> -->
28</body>
29</html>

css
1.field {
2  position: relative;
3  width: 400px;
4  height: 500px;
5  margin: 50px auto;
6  border: 1px solid black;
7  z-index: 100;
8}
9
10.player {
11  position: absolute;
12}
13
14.player__icon {
15  height: 50px;
16  width: 50px;
17  border: 1px solid black;
18  border-radius: 50% 50%;
19  margin: auto;
20}
21
22.player__icon.mouseDowned {
23  z-index: 1000;
24  color: gray;
25  -webkit-box-shadow: 0 0 2px 2px gray inset;
26          box-shadow: 0 0 2px 2px gray inset;
27}
28
29.player__name {
30  width: 60px;
31  text-align: center;
32  background-color: transparent;
33}
34
35/* 初期状態はformを非表示 */
36.player__name--form {
37  display: none;
38}
39
40/* clickイベントでformを表示させる */
41.player__name--form.inview {
42  display: block;
43}
44
45.player__name--input {
46  width: 60px;
47  text-align: center;
48  background-color: transparent;
49}

javascript
1let playerName = document.querySelector('.player__name');
2let nameInputForm = document.querySelector('.player__name--form')
3let nameInput = document.querySelector('#playerName');
4
5playerName.addEventListener('click', inputPlayerName);
6nameInputForm.addEventListener('submit', setPlayerName);
7
8// formのクラスにinvieを追加して入力欄を出現させる。
9function inputPlayerName(event){
10    nameInputForm.classList.add('inview');
11}
12
13// formの内容をsubmitして、その内容を対象spanタグのtextContentに代入
14function setPlayerName(event){
15    let inputValue = nameInput.value;
16    playerName.textContent = inputValue;
17}

試したこと

chromの開発ツールでデバッグしまして、jsのsetPlayerName関数の処理までは思った通りに
実現できていることがわかったが、setPlayerName関数の処理が終了した後に初期値の"player1"に
戻ってしまう。
setPlayerName関数の処理が終わった後contentScript.bundle.jsファイルの処理が進みまして
"あああ"だったものが"player1"に戻ってしまいます。

!(92ec4647d5baf7c2d11a238eddd3cc40.png)

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

ここにより詳細な情報を記載してください。

itagagaki

2021/09/12 17:06

調査が必要で、回答は無理なので、助言をここに書きます。 MutationObserverを用いてDOMの変化をキャッチして、console.logとの合わせ技で、どこで変化が起こっているのかを探してみてはどうでしょうか。 JavaScriptのMutationObserverでDOMの変化を監視する方法 - Qiita https://qiita.com/munieru_jp/items/a6f1433652124a2165e4