How to insert text into a form with JavaScript

I'm trying to create a simple extension for personal use. It's partially from laziness, and partially from an urge to learn. I've never made extensions before, but I've been looking at the documentation. Now I just need to write the code. What I'm trying to do, is when the browser loads a certain page, to insert text into a specific form. The form is as follows

<div id="set_tags" class="advanced_option"> 
   <label for="post_tags" class="inline_input_label" id="post_tags_label"
       onclick="Element.remove($(this))" 
       style="left:8px; right:auto; text-align:left">tags</label> 
   <input id="post_tags" name="post[tags]" type="text"/> 
 </div>

I haven't worked much with javascript, so is there a way to add the text "Music" to this when the page is loaded?

Solution

You can use the onload function to start your function. http://javascript.about.com/library/blonload.htm

Since you are new to javascript you may want to get familiar with unobtrusive javascript (http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html) which I find is a better way to write javascript, as you can then easily comment out javascript and see how it works when that is disabled. But, it would be easier to learn this in the beginning.

To get the input tag you can use document.getElementById() which would be something like:

var elem = document.getElementById('post_tags');

Then, to add text to this field there should be a value property in your input definition above, and you would just do:

elem.value = "Music";