Inject text into HTML form field with Javascript

Question

Can someone explain why this code doesn't add the string Username to the input field?

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

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

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

Thanks for any guidance.

 document.getElementById("username").value = "Username"; 

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

Answer 1

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>

Answer 2

尝试在主体末尾插入javascript，或创建一个函数并插入onload

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

document.getElementById("username").value = "Username";

Answer 3

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"

Answer 4

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>

Answer 5

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>