首页 > 解决方案 > 财产不承认

问题描述

我试图给我的h1标签一个我从 Firestore 数据库中检索到的值。但是我不断收到此错误:TypeError:无法设置属性'innerHTML' of null ...我不知道为什么会这样。

在我的 wait.html 中,我给了 h1 id="idnumberwaiting"。然后在同一个文件中,我链接了我的 javascript 脚本。

然后在我的 JS 脚本中我尝试了这个:

document.getElementById("idnumberwaiting").innerHTML = roomIDD

我想我做的一切都是对的...

但是,我添加 addEventListener 的 playButton 位于单独的 html 中。所以基本上我要做的就是在home.html我的 playButton 所在的位置,我想按下那个按钮,然后我想切换到wait.html页面并从 Firebase 加载值。

这是我的html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors Game</title>
    <link rel="stylesheet" href="wait.css">
</head>
<body>
    <header><a href="home.html">Rock Paper Scissors</a></header>
    <div class="result">
        <p id="pharagraph">Waiting for your opponent to join.</p>
    </div>
    <div class="choices">
            <div id="ch1" class="choice">
                <p class="lablechoice">ROOM ID</p>
                <h1 id="idnumberwaiting" class="lablechoice">13798</h1> 
                <div class="lds-ripple"><div></div><div></div></div>
            </div>
    </div>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
    <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
     <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-firestore.js"></script>
     <script src="game.js"></script>
</body>
</html>

这是我尝试为其赋值的 JS 代码:

const db = firebase.firestore();
playButton.addEventListener("click", function(){
    var roomIDD = roomID();
    db.collection('game').add({
        playerone : document.getElementById("nameinput").value ,
        playeronechoice : "",
        players : 1,
        playertwo : "",
        playertwochoice : "",
        roomid : roomIDD,
        scoreone : 0,
        scoretwo : 0
    }).then(function(){
        document.getElementById("idnumberwaiting").innerHTML = roomIDD.toString;
        setTimeout(function(){location.replace("wait.html");},2000); 
    });
});

标签: javascripthtmlfirebasegoogle-cloud-firestore

解决方案


推荐阅读