Upload Widget Click Function

Hello, I'd like to bind the upload widget call to a button click, and I'm having some difficulty getting this to work.

(1) User enters text into a box that I've created on the page, just an input tag named "issue".

(2) The document.getElementById() function is called to retrieve that input, and add it to the query

(3) The query is sent to your api. 

My code below does not work, nor do I see any errors in the console. The button does not even show on the page, so I'm having difficulty finding the error. Thanks.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://widget.cloudinary.com/global/all.js" type="text/javascript"></script>

<br><br>

<div id="button" align="center">

<!-- bind this event to the upload_widget -->
<input type="text" name="issue" id="issue" style="width:450px; height:75px;" placeholder="What Issue Do You Care About?"><br><br>

<a href="#" id="opener"></a>

<script type="text/javascript">

document.getElementById("opener").addEventListener("click", function() {

issue = $("#issue").val();
// issue = document.getElementById("issue").value;
// issue = "Fair Economy"

cloudinary.openUploadWidget({

cloud_name: "issuevoter",
upload_preset : "ekcyankt",
cropping: "server",
cropping_aspect_ratio: "1",
cropping_show_dimensions: "true",
theme: "white",
button_caption: "Upload Your Photo",

// pixels
max_image_width: 1055,
max_image_height: 1055,
min_image_height: 350,
min_image_width: 350,

gravity: "custom",
moderation: "webpurify",

thumbnail_transformation : "l_text:Permanent Marker_40:" + issue + ",g_north,y_0.11/g_center,l_photo-template.png,fl_relative,w_1.0,h_1.0/c_scale"
}, function(error, result) {console.log(error, result); });

}), false;

</script>

</div>

*EDIT* Turns out I just didn't add any text into the href, and that was the issue.