Использование querySelectorAll на флажках для отображения массива

Question

Моя идея заключается в том, что при наведении курсора на флажок 1 один и тот же индекс будет отображать ту же машину из той же позиции.

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];

Так что, если я наведу курсор мыши на первый флажок, будет записано "Bmw", если я наведу курсор на четвертый, будет зарегистрировано "Audi".

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];
var chb = document.querySelectorAll("input[type=checkbox]");

for (var i = 0; i < chb.length; i++) {
  chb[i].addEventListener("mouseover", test);
}

function test() {
  console.log(carArray[i]);
}

body {
  display: flex;
  flex-direction: column;
}

<div><input type="checkbox"> 1</div>
<div><input type="checkbox"> 2</div>
<div><input type="checkbox"> 3</div>
<div><input type="checkbox"> 4</div>
<div><input type="checkbox"> 5</div>
<div><input type="checkbox"> 6</div>

Answer 1

querySelectorAll() возвращает NodeList, существует множество способов конвертировать его в массив:

Array.from(querySelectorAll('query'));

Есть SO поток, показывающий различные способы справиться с этим:

Самый быстрый способ конвертировать JavaScript NodeList в массив?

Answer 2

Вы можете сделать что-то вроде этого:

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];
var chb = document.querySelectorAll("input[type=checkbox]");

chb.forEach((x,i) => x.addEventListener("mouseover", () => test(i)))

const test = i => console.log(carArray[i]);

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

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];
var chb = document.querySelectorAll("input[type=checkbox]");

chb.forEach((x,i) => x.addEventListener("mouseover", () => test(i)))

function test(i) {
  console.log(carArray[i]);
}

body {
  display: flex;
  flex-direction: column;
}

<div><input type="checkbox"> 1</div>
<div><input type="checkbox"> 2</div>
<div><input type="checkbox"> 3</div>
<div><input type="checkbox"> 4</div>
<div><input type="checkbox"> 5</div>
<div><input type="checkbox"> 6</div>