HTML onclick behaviour not working properly

I have the following HTML code:

<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BibTeX Maker</title>
    <script src="sidebar.js"></script>
</head>

<body>
      <button onclick="getData()">Click me</button>
      <span id="myText"></span>
</body>
</html>

and I have the following JavaScript code:

var HttpClient = function() { //some code };

function getData(){
    var response = client.get('https://reference-extraction.herokuapp.com/api/references/download?url=' + url + '&document_type=full_paper&reference_style=ensemble&reference_format=bibtex&engine=v1', function(response) {
        document.getElementById("myText").innerHTML = response
    });
};

I am passing the value of response to HTML id "myText". However, it is not showing me any output. Why is that?

edit: I have added the full code.

Solution

var response = client.get('https://reference-extraction.herokuapp.com/api/references/download?url=' + url + '&document_type=full_paper&reference_style=ensemble&reference_format=bibtex&engine=v1', function(response) {
        document.getElementById("myText").innerHTML = response
    });

There are two response in your code which might be the confusion. rename one response to some other name. since "function(response)" is the response returning from the server.

Or either directly call like this:

client.get('https://reference-extraction.herokuapp.com/api/references/download?url=' + url + '&document_type=full_paper&reference_style=ensemble&reference_format=bibtex&engine=v1', function(response) {
            document.getElementById("myText").innerHTML = response
        });

finally, is there any response returning from the server?