Unable to load js in Jira Plugin

[apoorva sharma]

I am trying to load .js file in my plugin but I am not able to do the same. I tried to follow the resolutions provided for similar issues in the jira community but they didn't work. Refer the screenshot of the code that I have written.

The .js file.

alert("hi");
AJS.$(function(){
function colorChange(){
var name = document.getElementById("name").value;
var lang = document.getElementById("language");
var txt = document.getElementById("txt");
document.getElementById("button").style.color ="green";
document.getElementById("txt").innerHTML="Hello! The text has changed." ;
alert("Hi, "+name+ ".");
}
AJS.toInit(function (){
$("button").click(function() {
colorChange();
});
});
});

 The dependency added in atlassian-plugin.xml

 <web-resource key="myPlugin-resources" name="myPlugin Web Resources"> 
<dependency>com.atlassian.auiplugin:ajs</dependency> 
<resource type="download" name="myPlugin.css" location="/css/myPlugin.css"/> 
<resource type="download" name="myPlugin.js" location="/js/myPlugin.js"/> 
<resource type="download" name="images/" location="/images"/> 
<context>myPlugin</context> 
</web-resource> 

The .vm file has requireResourcesForContext in head 

 $webResourceManager.requireResourcesForContext("myPlugin")

  Can someone please suggest why the file is not getting imported?