Changing value of a text box is not working

Question

My HTML(simplified):

<input class="text" type="text" id="emailbox" value="None">

Note: content1 is the ID of a div that contains the email retrieved from a file using PHP and this part works (it returns the email)

My Javascript:

var email = $.trim(document.getElementById('content1').textContent);
if (!email == "") { document.getElementById("emailbox").value = email; }

The value of the input box is not changing at all

The error is with the line

document.getElementById("emailbox").value = email;

or with the html

ALL CODE: https://pastebin.com/5JSLzHdw

Answer 1

I grabbed your Pastebin code, and if I set the content of your content1 div to be this:

<div id="content1" style="display: none;">EXAMPLE@EXAMPLE.COM</div>

then the following code works as a replacement for the script starting at line 327. This is completely unstyled and I haven't changed any of the code except the essential to make it work.

<script>
  $(document).ready(function(){
    var email = document.getElementById('content1').textContent;
    var register = document.getElementById("para7");
    var login = document.getElementById("para8");
    var logout = document.getElementById("para9");

    if (email !== "") {
      register.style.display = "none";
      login.style.display = "none";

      // It's an input so you need to set VALUE, not innerHTML
      document.getElementById('mailbox').value = email;
      console.log("We are here")
    } else {
      window.location.href = "../login/";
      logout.style.display = "none";
    }

    document.getElementById("logo").addEventListener("click",function(){
      document.getElementById("homebutton").click();
    });

    document.getElementById("account").addEventListener("click",function(){
      if(!email == ""){
        document.getElementById("accountbutton").click();
      }
    });
  })
</script>

Others correctly commented that you shouldn't run your code until the document is ready, hence wrapping it inside that jQuery ready handler.

As you are using jQuery, I would suggest replacing all of your document.getElementById("whatever") instances with the jQuery method $("#whatever") as it will make the code more concise.

Answer 2

If I try your code like this, then document.getElementById('content1') returns null

Did you wrap your code in

window.onload = function() {
    // run your script in here
}

or for jQuery

$(document).ready(function() {
    ...
}

Otherwise your code may try to access the DOM while it isn't ready yet.

See here https://stackoverflow.com/a/13921149/11472484 and here Running jQuery code before the DOM is ready?