I have various lists on our sharepoint site. One list is named "LD". I am trying to create a simple table that counts the records and sums the cost in this list. However I am stuggling with the script to populate the table with the variable values (Icount, SumPrices) at the very bottom. Where am I going wrong? I can fetch the values (ie: 252, and $352,000) respectively as demonstrated at the top of my script (just a text). I just can't seem to put the values in my table. The 2nd and 3rd columns are BLANK
<p id="SumPrices">352662</p>
<p id="Icount">252</p>
<table border="10" cellspacing="10" cellpadding="2">
<tbody>
<tr>
<th scope="col"> Fiscal </th>
<th scope="col"> Courses </th>
<th scope="col"> Cost </th>
<th scope="col"> Comment </th>
</tr>
<tr>
<td> 2019-20 </td>
<td id="Icount"></td>
<td id="SumPrices"></td>
<td> Something </td>
</tr>
</tbody>
</table>...
<script>
<script type="text/javascript">
var listName = 'LD';
var xhr = new XMLHttpRequest();
xhr.open('GET', _spPageContextInfo.webAbsoluteUrl +
'/_api/web/lists/GetByTitle(\'' + listName + '\')/items?
$select=Cost&$top=1000');
xhr.setRequestHeader('Accept', 'application/json; odata=verbose');
xhr.onload = function(){
if (xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
results = results.d.results;
var sum = 0;
for (var i = 0; i < results.length; i++){
sum += results[i].Cost;
}
document.getElementById('SumPrices').innerText = sum;
document.getElementById('Icount').innerText = i;
}
else {
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
</script>