JavaScriptでのテキスト操作

質問内容

画面中央に、立方体を表示し、３６０°　アニメーションをさせております。
そして、その立方体の壁面に　？　というテキストを表示させております。

特定の要素にホバーした時に、この　？　というテキストを、任意のものに変更させたいのですが、
top-text 部分で、　"Uncaught TypeError: Cannot set property 'textContent' of null" というエラーがでます。

正直、理由が全く分かりません。

初心者ですので、コードが稚拙かと思いますが、
コードを貼り付けますので、ご教示頂ければ幸いです。

御手数をお掛け致しますが、何卒宜しくお願い致します。

html
```
            <div class="boxBase">
                <div class="top"　id="top-text">？</div>
                <div class="bottom" id="bottom-text">？</div>
                <div class="front" id="front-text">？</div>
                <div class="back" id="back-text">？</div>
                <div class="left" id="left-text">？</div>
                <div class="right" id="right-text">？</div>
            <div id="level1">Lv.1</div>

 　 <script type="text/javascript" src="karipro.js"></script>
</body>


```

css
```
.boxBase {
  transform-style:preserve-3d;
  width:150px;
  height:150px;
  animation: turnAround1 10s linear 0s infinite normal none running;
} 

@keyframes turnAround1 {
  0%{
    transform:rotateX(0deg) rotateY(0deg);
  }
  100%{
    transform:rotateX(360deg) rotateY(360deg);
  }
} 


.boxBase  div {
  position:absolute;
  background-color:rgba(240, 130, 30, 0.7);
  border:0.2px solid #f0821e;
  width:100%;
  height:100%;
}

.boxBase  .top {
  transform:translateY(70px) rotateX(-90deg);
}
.boxBase  .bottom {
  transform:translateY(-70px) rotateX(90deg);
}
.boxBase  .front {
  transform:translateZ(70px);
}
.boxBase  .back {
  transform:translateZ(-70px) rotateX(180deg);
}
.boxBase  .left {
  transform:translateX(-70px) rotateY(-90deg);
}
.boxBase  .right {
  transform:translateX(70px) rotateY(90deg);
}
```
javaScript

```
let level1 = document.getElementById("level1");
level1.addEventListener("mouseenter",onlevel1Text,);
level1.addEventListener("mouseleave",offlevelText,);

function onlevel1Text(){
    let frontText = document.getElementById("front-text");
    frontText.textContent = "Level 1";
    let backText = document.getElementById("back-text");
    backText.textContent = "No Multi";
    let leftText = document.getElementById("left-text");
    leftText.textContent = "＋";
    let rightText = document.getElementById("right-text");
    rightText.textContent = "―";
    let topText = document.getElementById("top-text");
    topText.textContent = "1→";
    let bottomText = document.getElementById("bottom-text");
    bottomText.textContent = "→9";
}

function offlevelText(){
    let frontText = document.getElementById("front-text");
    frontText.textContent = "？";
    let backText = document.getElementById("back-text");
    backText.textContent = "？";
    let leftText = document.getElementById("left-text");
    leftText.textContent = "？";
    let rightText = document.getElementById("right-text");
    rightText.textContent = "？";
    let topText = document.getElementById("top-text");
    topText.textContent = "？";
    let bottomText = document.getElementById("bottom-text");
    bottomText.textContent = "？";
}