how use return value function javascript in html

Question

hello,

 

I want to view sites from my database ,The number of sites varies by company.

 

The display is as follows

 

 

now i want for each site adding information like :total outgoing call in my view is in french Total Appels sortants

for design this page i use the next code :

<fieldset class="fieldset1">
<div class="row" id="MySite" style=" background-color: mintcream">
</div>
</fieldset>
and function javascript:
function fillSiteWidget(AllSite) {
;
var wrapperSite = document.getElementById("MySite");
AllSite.forEach(allsite => {
var myname = allsite.site;
myHTML += '<div class="col-md-4">'
myHTML += '<section class="widget" style="margin-top:20px">'
myHTML += '<div class="widget-controls">'
myHTML += '</div>'
myHTML += '<div class="widget-body" >'
myHTML += ' <div class="widget-top-overflow windget-padding-md clearfix bg-info text-white" style="-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;">'
myHTML += ' <h4 class="mt-lg mb-lg" style="color:white">' + 'Site :' + '<span class="mt-lg mb-lg" style="font-size:13px;"> <a href="#" onclick="Info_Site(\'' + myname + '\');"> <strong style="color:white" >' + allsite.libellé + '</strong></a></span> '
myHTML += ' </h4>'
myHTML += ' <h4 id="doc_head" style="visibility: hidden;">' + allsite.site;
myHTML += ' </h4>'
myHTML += ' </div>'
myHTML += ' </div>'
myHTML += ' <footer class="bg-body-light">'
myHTML += ' <ul class="post-comments mt mb-0">'
myHTML += ' <li>'
myHTML += ' <div class="comment-body">'
myHTML += ' <h6 class="author fw-semi-bold" >Total Appels Entrants: <small> </small></h6>'
myHTML += ' </div>'
myHTML += ' <div class="comment-body">'
myHTML += ' <a class="edit" title="Détail des appels :' + allsite.libellé + '<br/> Du ' + formatDate(document.getElementById("datedebut").value) + ' Au ' + formatDate(document.getElementById("datefin").value) + '<br/> Appels Locaux : <br/> Appels nationaux : <br/> Appels Internationaux : <br/> Appels GSM :<br/> Appels Numéros spéciaux :" + data-toggle="tooltip" data-html="true"<h6 class="author fw-semi-bold" >Total Appels sortants : <small id="AppelSortant">' + SiteStatList(allsite.site) + ' </small></h6> </a>'
myHTML += ' </div>'
myHTML += ' <div class="comment-body">'
myHTML += ' <h6 class="author fw-semi-bold">Coût Total: <small></small></h6>'
myHTML += ' </div>'
myHTML += ' </li>'
myHTML += ' <li>'
myHTML += ' </li>'
myHTML += ' </ul>'
myHTML += '</footer>'
myHTML += '</section>'
myHTML += '</div>'
myHTML += '</div>'
});
wrapperSite.innerHTML = myHTML;
}

for adding "total outgoing call" to each site in my view i creat the next javascript function :

function SiteStatList(CodeSite) {
var apiurl = "http://localhost:14405/api/StatAppelSortantApi?G_CodeSite=" + CodeSite ;
$.ajax({
url: apiurl,
type: 'GET',
dataType: 'json',
success: function (d) {
TotalNbreAppellSortantBySite = d;
document.getElementById("AppelSortant").innerHTML = TotalNbreAppellSortantBySite;
},
error: function () {
alert("Error please try again");
}
});
}

i call this function in the next line :

myHTML += ' <a class="edit" title="Détail des appels :' + allsite.libellé + '<br/> Du ' + formatDate(document.getElementById("datedebut").value) + ' Au ' + formatDate(document.getElementById("datefin").value) + '<br/> Appels Locaux : <br/> Appels nationaux : <br/> Appels Internationaux : <br/> Appels GSM :<br/> Appels Numéros spéciaux :" + data-toggle="tooltip" data-html="true"<h6 class="author fw-semi-bold" >Total Appels sortants : <small id="AppelSortant">' + SiteStatList(allsite.site) + ' </small></h6> </a>'

normally the result I have if i call :function SiteStatList(CodeSite) 2 result :700 for site1 and 0 for site 2

 

but the result is not good in my view i have 0 for site 1 and undifined for site2, maybe I didn't call my function well

 

thanks for help