Как на javascript передать переменные в тело POST запроса (fetch)?

Есть файл с html-разметкой. К нему подключен файл js.

Нужно сделать POST-запрос с помощью fetch. Хочу использовать в теле запроса переменную.

Получаю значения переменной из клика по элементу списка. В html-файле:

При нажатии на элемент списка вызывается функция getType:

<li onclick="getType(event)" v-for="i in types"> {{ i }} </li>

(types - просто массив)

Кнопка, по нажатию которой должен происходить запрос (также находится в html-файле):

             <div id="button">
                <button class="btn btn-success" 
                onclick="
                sendCalcRequestF('POST', requestCalcURL, body)
                .then(data => console.log(data))
                .catch(err => console.log(err))
                "
                ondblclick="echo()">
                рассчитать
            </button>
            </div>

Код в js-файле:

let chooseType;

function getType(event) {
    chooseType = event.target.innerHTML;
    console.log(chooseType);
    return chooseType;
}

const body = {
    type: chooseType,
 }

const headers = {
    'Content-type': 'application/json'
}

function sendCalcRequestF(method, url, body) {
    return fetch(url, {
        method: method,
        body: JSON.stringify(body),
        headers: headers
    }).then(response => {
        return response.json()
    })
}

function echo() {
     console.log("body", body)
}             

Полученные с помощью getType данные нормально выводятся в консоль, но тело запроса в итоге остаётся пустым (это видно при выводе его в консоль, и запрос не работает)

Тело при выводе в консоль выглядит так (вывожу с помощью функции echo(), описанной в js-файле и вызываемой при двойном клике на кнопку):

{type: undefined}

Причём тот же самый код совершенно нормально работает с другим body, где значение задано изначально:

const body2 = {
    type: "шрот"
}

(остальной код не меняю, просто вместо body передаю в функцию в качестве параметра body2, и всё работает)