Javascript & Sharepoint: заполнить таблицу значениями переменных

Question

У меня есть различные списки на нашем сайте sharepoint. Один список называется «LD». Я пытаюсь создать простую таблицу, которая подсчитывает записи и суммирует стоимость в этом списке. Однако я пытаюсь заполнить таблицу значениями переменных (Icount, SumPrices) в самом низу. Куда я иду не так? Я могу получить значения (ie: 252 и $ 352 000) соответственно, как показано в верхней части моего сценария (просто текст). Я просто не могу поместить значения в мою таблицу. 2-й и 3-й столбцы пустые

<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>

Answer 1

Причина, по которой ваш код не работает, заключается в том, что скрипт выполняется до того, как таблица вставлена ​​на страницу, поэтому он не может найти ячейки для обновления.

Вам нужно либо переместить скрипт в после таблицы (или переместите таблицу перед сценарием), или используйте функцию, чтобы дождаться окончания загрузки страницы. Есть несколько способов сделать последнее, некоторые из которых описаны в этом популярном вопросе .

Редактировать: Если вы хотите узнать больше о том, куда поместить код JavaScript, я рекомендую чтение этого вопроса и принятого ответа , поскольку оно объясняет все в довольно простых терминах и предлагает несколько решений.