Нужна помощь в массиве JavaScript

<button id='x'>click</button>
<script>
const x = document.querySelector('#x');
const a = [1, 2, 3];
let i = -1;
x.addEventListener('click', () => console.log(a[++i % a.length]));
</script>

Некоторое время поломал голову, поначалу думал что реально цикл нужен... Но ларчик просто открывался, не нужен тут никакой цикл
>>>
arr = [1,2,3];
n = 0;
but.onclick = function () {
if (n > arr.length - 1) {n = 0};
console.log(arr[n]);
n++;
}

Очевидно нужен какой-нибудь указатель, который будет хранить номер конкретного элемента и увеличиваться после каждого клика, или сбрасываться - если достигнут arr.length - 1

<button id="test">test</button>

let arr = [1, 2, 3];
let index = 0;

test.addEventListener('click', function(){
  console.log( arr[index] );

  index = (index == arr.length - 1) ? 0 : index + 1;
});

Забей на консоль - не в каменном веке. Определи текстбокс.
Используй shift/unshift и push/pop.

var massive = ["Печень", "Сахар", "Какао"];
function funcAction() {
var frmReslt = document.getElementById('result');
frmReslt.value = massive[0];
var elFirst = massive.shift();
massive.push(elFirst);
}

Тебе тогда бесконечный массив нужен. Либо постоянно добавлять в него элементы.

<button id="test" onclick="console.log( arr[(index++)%arr.length] );">test</button>
<!--как вариант, нет деления на каждом шаге, нет ограничения (в первом можно вывалится в минус), начинаем с -1
<button id="test" onclick="console.log( arr[(index>arr.length-2?(index=0):++index)] );">test</button>
<!---->
<!-- как больной вариант без if + деление на 3 чисел от 0 до 3 т. е. довольно шустро, начинаем с -1
<button id="test" onclick="console.log( arr[(index = (index + 1) % arr.length)] );">test</button>
<!---->
<script>
var arr = [1, 2, 3];
var index = 0;
</script>