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

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? — codewithfeeling, Feb 06 '20 at 22:35
@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 — , Feb 06 '20 at 22:38
Note that you can also simply say `if (email) { /* ... */ }` — Gershy, Feb 06 '20 at 22:40
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"); — , Feb 06 '20 at 22:40
@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. — codewithfeeling, Feb 06 '20 at 22:40
@MartinNajemi I think you need to post more of your code. I tried what you posted and it works fine, as I said. So something else must be wrong. — codewithfeeling, Feb 06 '20 at 22:44
@raffjones Just a Side-Note: If I use the console and check the value of the element, it shows the email, but it isnt actually displayed in the box... — , Feb 06 '20 at 22:44
If you want, i can post the entire file somewhere, ill add a link here — , Feb 06 '20 at 22:46
I have no clue what it could be so ill post the entire thing, i warn you, it is a mess — , Feb 06 '20 at 22:47
@ImanEmadi I've tried innerHTML, innerText and value, none work — , Feb 07 '20 at 08:37

codewithfeeling · Accepted Answer · 2020-02-07T11:18:03.407

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.

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! — codewithfeeling, Feb 07 '20 at 21:17

score 0 · Answer 2 · edited Feb 06 '20 at 23:10

0

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?

edited Feb 06 '20 at 23:10

Jeff Sloyer

4,817
1
21
46

answered Feb 06 '20 at 23:01

Florian Schwalm

166
1
3

2

That is because i didnt include the part where it gets the email – Feb 07 '20 at 08:32
2

I checked if it had the email ready and it was, by using console.log(email) just before setting the textbox – Feb 07 '20 at 08:38

Changing value of a text box is not working

2 Answers2