[CryNet]

О, спасибо. Ещё один маленький вопрос
У меня есть уже выбранные input-ы:

<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p>

Как сделать, чтобы при загрузке страницы уже отображалось значение выбранных input-ов? Раньше была немного другая конструкция функции:

function getResult(){
    var menu = document.getElementsByClassName('menu');
    var cost = 0;
    var kkal = 0;
    for (let index = 0; index < menu.length; index++) {
        if(menu[index].checked) {
            cost += parseFloat(menu[index].getAttribute('data-cost'));
            kkal += parseFloat(menu[index].getAttribute('data-kkal'));
        }
    }
    document.getElementById('cost').innerHTML = cost; // значение выводится тут
    document.getElementById('kkal').innerHTML = kkal;// и здесь
}

getResult();

И достаточно было просто вызвать функцию. В вашей же реализации такое не прокатывает.