What is the difference between the invocation in the console and a dial event?

Here is a list of
<select id="secession_NP">
 <option value="null">Select the warehouse for New Mail</option>
</select>

A function that makes a request to the api NP and then adds in the drop-down list, a list of offices which are located in the city of Cherkassy.
getBranchesNovaPoshta function(city,lang){
 var xhr=new XMLHttpRequest();
console.log(xhr)
 var json=JSON.stringify({
"modelName":"AddressGeneral",
"calledMethod":"getWarehouses",
"apiKey":"d878fb1a280844a6629b6a18bd50bc43",
 "methodProperties": {
"CityName":sity
},
Language:lang
});
xhr.open("POST",'http://api.novaposhta.ua/v2.0/json/',true)
xhr.setRequestHeader('Content-type','application/json;charset=utf-8');
xhr.onreadystatechange=function(){
if(xhr.readyState===XMLHttpRequest.DONE&&xhr.status===200){
 var res=JSON.parse(xhr.responseText);
 var i=0;
 for(var i in res.data){
i++;
 var option=document.createElement('option');
if(res.data[i]!=undefined){
 var type = /Privat/i.test(res.data[i].Description)?'PB':'NP';
 var number = /[#n]\s*?(\d+)/.test(res.data[i].Description) ? /[#n]\s*?(\d+)/.exec(res.data[i].Description)[1] : 0;
option.value=type+"+number;
option.innerHTML=res.data[i].Description;
document.getElementById('secession_NP').appendChild(option);
}
}
};
};
xhr.send(json);
 }

The launch of this inept code
document.addEventListener('DOMContentLoaded',function(ev){
document.getElementById('secession_NP').onmousedown=function(ev){
getBranchesNovaPoshta("Cherkassy","EN");
};
 }, false);

In result you get nothing. The list is displayed. New opton are added.
When you call the function via console I receive from the server a normal json when clicking I get an empty json.
what the fuck is this ? That makes no sense.
June 5th 19 at 21:55
1 answer
June 5th 19 at 21:57
I think the answer to this question, You should give yourself.
But to understand nafig need to remove this code and rewrite it using jQuery (so it will be better).
Rewrite and most likely will work.

Plus deal with modularity in js using import/export:
https://learn.javascript.ru/modules

This is necessary to avoid pollution of the global scope handlers, etc.
For construction ES6 You will need a collector webpack4 or the task Manager with Tusk Gulp with browserify (suggest the first option)

This is all necessary to Your code was:
- easier
- clearer in the first place for You
- in case of error, You will quickly be able to find it (in which module)

Find more questions by tags HTMLJavaScript