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="">

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="">

• javascript
• html

• 1 if you run the code snippet you will find the value there, so what exactly is the problem? – Labib Ismaiel 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. – moopet Commented Aug 31, 2016 at 13:11
• 2 As you can see, it works. Move script right before BODY end tag. – user6748331 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. – epascarello 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 – Rajshekar Reddy Commented Aug 31, 2016 at 13:13

5 Answers 5

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>

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";

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"

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>

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>