I have a text box in which the user enters text, clicks a button, and the text then appears in a listbox directly below.

Here is my function:

function addIt() {
var txt = window.document.recipe_form.new_category_text.value;
addOption = new Option(txt,txt); window.document.recipe_form.category_dropdown.options[numItems++] = addOption;
return true;
}

Here is my code:

<form name="recipe_form">
<input type="text" name="new_category_text">
<input type="button" name="add_category" value="Add Category" onclick="addIt();">
<td style="border:none">
<select name="category_dropdown" style="width:200px;height:75px;" multiple size="2">
<option selected="selected">Bread</option>
<option>Dessert</option>
<option>Meat</option>
<option>Pasta</option>
<option>Potatoes</option>
<option>Salad</option>
</select>
</td>
</form>

I don't know what I'm doing wrong; any help would be greatly appreciated!!!