I tryed to fix everything, but still getting : TypeError: Cannot set properties of null (setting 'innerHTML')

Question

我的代码出现以下错误：

Image (i dont have REP 10 so i can post it like link only)

当我在我的 PC 上打开它时一切正常，但托管出现一些错误

我尝试了找到的所有修复程序，但没有任何反应。一切都很好，直到我将代码重新上传到网页并重置主机。任何人都知道为什么我会收到此错误，或者如何改进代码以使其正常工作？

TypeError: Cannot set properties of null (setting 'innerHTML')             subscribe.js:159 
    at Object.next (index.js:13)
    at subscribe.js:48
    at subscribe.js:152

HTML:

<html>
    <head>
        <title>WocaBoo - Download</title>
        <link rel="shortcut icon" href="https://jzh56g.zombeek.cz/elements/images/uploads/40539/wocaboo1.png" type="image/x-icon">
        <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>

    
    <div id="login_div" class="main-div">
        <h3>Login to download</h3>
        <input type="email" placeholder="Email..." id="email_field" />
        <input type="password" placeholder="Password..." id="password_field" />
        <div class="g-recaptcha" data-sitekey="6Lcd0-gdAAAAAAuOarm420yReswr5IY0tUpnhX74" data-callback="enableBtn"></div>
      

        <button id="log" disabled=discabled onclick="login()">Sign In</button>
        <p> </p>
        <button id="regis" disabled=disabled onclick="register()">Sign Up</button>
        <p> </p>


    <div id="user_div" class="loggedin-div">
        <h3>Welcome User</h3>
        <button onclick="location.href = 'https://filetransfer.io/data-package/Q0dtm1T2/download'; logout();">Download</button>
        <button onclick="logout()">LogOut</button>
    </div>



    <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "AIzaSyAuP2H1XCM98n_eo_qL0USEs7hGOCfp3RM",
            authDomain: "wocaboo-c5116.firebaseapp.com",
            projectId: "wocaboo-c5116",
            storageBucket: "wocaboo-c5116.appspot.com",
            messagingSenderId: "978655629649",
            appId: "1:978655629649:web:f513370e6fca4ee2aa4370",
            measurementId: "G-8K3L4XPQHN"
        };
        firebase.initializeApp(config);
    </script>

    </body>
    <script src="index.js"></script>
</html>

JS:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.

    document.getElementById("user_div").style.display = "block";
    document.getElementById("login_div").style.display = "none";

    var user = firebase.auth().currentUser;

  if(user != null){

    var email_id = user.email;
    document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;

    }

  } else {
    // No user is signed in.

    document.getElementById("user_div").style.display = "none";
    document.getElementById("login_div").style.display = "block";

  }
});

function login(){

  var userEmail = document.getElementById("email_field").value;
  var userPass = document.getElementById("password_field").value;

  firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;

    window.alert("Error : " + errorMessage);

    // ...
  });

}

function register(){

  var userEmail = document.getElementById("email_field").value;
  var userPass = document.getElementById("password_field").value;

  firebase.auth().createUserWithEmailAndPassword(userEmail, userPass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;

    window.alert("Error : " + errorMessage);

    // ...
  });

function disableeBtn(){
   document.getElementById("log").disabled = true;
   document.getElementById("regis").disabled = true;
 }

}

function enableBtn(){
   document.getElementById("log").disabled = false;
   document.getElementById("regis").disabled = false;
 }

function logout(){
  firebase.auth().signOut();
}

CSS:

body {
  background: #fff;
  padding: 0px;
  margin: 0px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
}

input, button {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

.main-div, .loggedin-div {
  width: 20%;
  margin: 0px auto;
  margin-top: 150px;
  padding: 20px;
  display: none;
}

.main-div input {
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  padding: 15px;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.main-div input:focus {
  border: 1px solid #777;
}

.main-div button, .loggedin-div button {
  background: #971717;
  color: #fff;
  border: 1px solid #971717;
  border-radius: 5px;
  padding: 15px;
  display: block;
  width: 100%;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.main-div button:hover, .loggedin-div button:hover {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
}

Answer 1

您没有将 user_para 指定为其 ID 的任何元素。也许你想 <h3>Welcome User</h3> 改为 <h3 id="user_para">Welcome User</h3>.

Answer 2

错误中的这一行应该很有帮助：

at Object.next (index.js:13)

因此您应该查看 index.js 文件中的 第 #13 行：

document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;

在你的HTML中快速搜索user_para，我发现这个元素不存在。您需要在尝试将 innerHTML 分配给它之前创建它。

I tryed to fix everything, but still getting : TypeError: Cannot set properties of null (setting 'innerHTML')

I tryed to fix everything, but still getting : TypeError: Cannot set properties of null (setting 'innerHTML')

html

javascript

css

web