Переменная записывается, не в тот div

Question

Мне нужно записать переменную в div, У меня есть 2 checkbox которые записываются отдельно каждый в div. Но почему-то оба чекбоксы записываются в первый div, а не первый check = первый div, второй check = второй div.

 function getCheckedCheckBoxes() {
     var checkboxes = document.getElementsByClassName('checkbox');
     var checkboxesChecked = []; // можно в массиве их хранить, если нужно использовать 
     for (var index = 0; index < checkboxes.length; index++) {
         if (checkboxes[index].checked) {
             checkboxesChecked.push(checkboxes[index].value); // положим в массив выбранный
             document.getElementsByClassName('note-editable')[0].innerHTML  +=checkboxes[index].value;
         }
     } 
     return checkboxesChecked; // для использования в нужном месте
 }

 function getCheckedCheckBoxes2() {
     var checkboxes = document.getElementsByClassName('checkbox');
     var checkboxesChecked = []; // можно в массиве их хранить, если нужно использовать 
     for (var index = 0; index < checkboxes.length; index++) {
         if (checkboxes[index].checked) {
             checkboxesChecked.push(checkboxes[index].value); // положим в массив выбранный
             document.getElementsByClassName('note-editable')[1].innerHTML  +=checkboxes[index].value;
         }
     } 
     return checkboxesChecked; // для использования в нужном месте
 }

Хоть я и задаю getElementsByClassName('note-editable')[1],но все равно записывает в первый div. Где я допустил ошибку?

Answer 1

Вам нужно регистрировать event'ы нажатия на чекбокс (addEventListener()).

То есть, в массив checkboxes собираем чекбоксы, которые у нас есть, и потом в цикле для каждого регистрируем event 'click'. Биндим вложенную функцию (замыкание) bindClick, чтобы получить index, и записываем значение чекбокса в div с таким же индексом, что и у текущего чекбокса (если он чекнут). Если отчекнут - очищаем поле соответствующего div'a.

getCheckedCheckBoxes();
function getCheckedCheckBoxes() {
    var checkboxes = document.getElementsByClassName('checkbox');

    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].addEventListener('click', bindClick(i));
    }

    function bindClick(i) {
        return function () {
            this.checked
                ? document.getElementsByClassName('note-editable')[i].innerHTML = this.value
                : document.getElementsByClassName('note-editable')[i].innerHTML = ''
        };
    }
}

<div>
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
</div>

<div>
    <div class="note-editable"></div>
    <div class="note-editable"></div>
</div>

БЛОГ НА HUSL

Переменная записывается, не в тот div

Ответы (1 шт):