I tryed to fix everything, but still getting : TypeError: Cannot set properties of null (setting &#0-CodePudding

I am getting following error in my code :

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

Everything worked when i opend it in my PC, but hosting is maing some errors

I tried all fixes that i found, but nothing happend. Everything wprked well untill i reuploaded code to webpage and reseted hosting. Anyone know why i am getting this error, or ho to improve code to make it working?

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" >
        <h3>Login to download</h3>
        <input type="email" placeholder="Email..." id="email_field" />
        <input type="password" placeholder="Password..." id="password_field" />
        <div  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" >
        <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;
}

CodePudding user response：

This line from error should be pretty helpful:

at Object.next (index.js:13)

So you should look on line #13 in your index.js file which is:

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

Just by quickly searching for user_para in your HTML, I can see that this element doesn't exist. You need to create it before trying to assign innerHTML to it.

CodePudding user response：

You don't have any element with user_para assigned as its Id. Maybe you want <h3>Welcome User</h3> changed to <h3 id="user_para">Welcome User</h3>.