2

Why doesn't this code add the string Username to the input field?

It runs in the snippet below but not locally on a basic test.html page.

<script type="text/javascript">
document.getElementById("username").value = "Username";
</script>

<input id="username" name="username" value="">

Code snippet:

document.getElementById("username").value = "Username";
<input id="username" name="username" value="">

7
  • 1
    if you run the code snippet you will find the value there, so what exactly is the problem? Commented Aug 31, 2016 at 13:10
  • 2
    The input field isn't defined when the script runs. Put it first, or delay the script until the DOM is loaded. Commented Aug 31, 2016 at 13:11
  • 2
    As you can see, it works. Move script right before BODY end tag. Commented Aug 31, 2016 at 13:11
  • 1
    Look at the developer console in your browser, you are going to see an error message. Basically you are trying to eat your pizza before it is made. You can not reference an element before it is rendered to the page. Commented Aug 31, 2016 at 13:13
  • 1
    @michaelmcgurk may be your script is running before even the html element is loaded into the DOM.. try placing your script after your html Commented Aug 31, 2016 at 13:13

5 Answers 5

4

The javaScript runs with a virtual machine and acts as an interpreter. So, you need to keep the sequence. You are using the javascript before defining the input element. So, JavaScript does not recognize the element.

Just put the JavaScript code after the HTML element definition:

<input id="username" name="username" value="">

<script type="text/javascript">
document.getElementById("username").value = "Username";
</script>
Sign up to request clarification or add additional context in comments.

1 Comment

@michaelmcgurk, if you think you found the answer, please solve this post to prevent other developers spending time on this
0

Try insert the javascript at the end to body, or create a function and insert onload

<input id="username" name="username" value="">
document.getElementById("username").value = "Username";

Comments

0

Have you tried to create the script after the input field? If you've created the script inside head tag or before you create the input field it shouldn't work as well, because there's no reference to id "username"

Comments

0

It is problem of your code sequence, in your case when browser executes Javascript code username input field is not found in DOM Element of username id.

So change sequence of your code

<input id="username" name="username" value="">

<script type="text/javascript">
document.getElementById("username").value = "Username";
</script>

Comments

0

you are using input element before defining it...

so first define input element then use it in your script

<input id="username" name="username" value="">
<script type="text/javascript">
 document.getElementById("username").value = "Username";
</script>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.