Can't Run JavaScript from Custom Widget

Hey,

New to WordPress. I’m trying to create a dynamic widget options form in the Admin Panel for my custom widget. I can’t seem to modify any DOM elements of this form from an external JavaScript file. I am able to run alert(“hello from JavaScript”) though, so I know I am successfully loading the script via wp_enqueue_script(). I have also tried running the script from a test HTML script, and when invoked from my test page, the script functions as it should.

The Script (monthAngel.js) :

function addAngelForm() {
	//alert("hello from javascript");
	var form = document.getElementById("addAngelButton").parentNode;
	var paragraph = document.createElement("p");
	var text = document.createTextNode("test text for new paragraph");
	paragraph.appendChild(text);
	form.appendChild(paragraph);
}

Enqueue Script (in functions.php) :

function add_header_scripts() {
		wp_enqueue_script('monthAngelScript',
			get_bloginfo('template_directory') . '/js/monthAngel.js');
	}

add_action('admin_print_scripts', 'add_header_scripts');

In WP_Widget Subclass (declared in functions.php) :

function form($instance) {
			?>
			<p>
				<label for="<?php echo $this->get_field_id('title');?>">Title: </label>
				<input id="<?php echo $this->get_field_id('title');?>"
					name="<?php echo $this->get_field_name('title');?>"
					type="text"
					value="<?php  echo esc_attr($instance['title']);?>" />
				<input class="button-primary" style="margin:5px; float:right;"
					id="addAngelButton" type="button" onClick="addAngelForm()"
					value="Add Angel"/>
			</p>
			<?php
		}

Any ideas?