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

• codewithfeeling: The code is a little odd in that you are mixing and matching vanilla JavaScript with the jQuery $.trim function. Maybe a silly question but are you sure you are loading jQuery? It is also preferable to use if (email !== "") not if(!email == "") And have you tried logging each step to the console?
• user12823945: @raffjones About the mixing and matching the jquery, the section works and i have no actual need to change it if it works, i replaced document.getElementById("emailbox").value = email; with alert("test") to see if it was being executed and it was, so there are no issues there. I also changed the if statement to email !== "" as you suggested and no changes
• Gershom Maes: Note that you can also simply say if (email) { /* ... */ }
• user12823945: Also the console is being logged to a line after this so that area works, i did something like this: document.getElementById('emailbox').value = email; console.log("Log Test")
• codewithfeeling: @MartinNajemi - I was just asking if you are sure jQuery is being loaded. I tried your code without $.trim and it works fine - the input does update.

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;">[email protected]</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.

• codewithfeeling: You are very welcome. For the purposes of StackOverflow please leave the Pastebin content as it currently stands as that’s the only way the accepted answer makes sense. Good luck with the rest of your project!

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?

• user12823945: That is because i didnt include the part where it gets the email
• user12823945: I checked if it had the email ready and it was, by using console.log(email) just before setting the textbox