Перебрать массив input's через цикл и получить их значение

Есть такой код:

<input class="field" type="number">
<input class="field" type="number">
<input class="field" type="number">
<button id="btn">Click</button>
<p>XXX<p>
(function() {
 let text = document.querySelector('p');
 let fields = document.querySelectorAll('.field');
 let btn = document.querySelector('#btn');
 btn.addEventListener('click', function() {
    for(var i = 0; i < fields.length; i++) {
        text.textContent = fields[i].value;
        console.log(fields[i].value)
    }
 })
})()

Мне нужно записать в элемент p значения каждого input's при клике на кнопку. Но мой код почему то записывает значение только последнего поля, при этом в консоль выводит значения всех полей. В чем ошибка?