主页 / 问题 / 1127556
Accepted
Андрей Повх
Asked:2020-05-18 21:39:18 +0000 UTC2020-05-18 21:39:18 +0000 UTC

变量写入错误的 div

  • 772

我需要将一个变量写入一个 div，我有 2 个复选框，每个复选框分别写入一个 div。但由于某种原因，两个复选框都写入第一个 div，而不是第一个检查 = 第一个 div，第二个检查 = 第二个 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。我在哪里做错了？

javascript

1 个回答

  1. Best Answer

    您需要在复选框 (addEventListener()) 上注册点击事件。

    也就是说，我们将我们拥有的复选框收集到复选框数组中，然后在循环中为每个复选框注册“点击”事件。我们绑定bindClick嵌套函数（闭包）来获取索引，并将复选框值写入与当前复选框具有相同索引的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>

    • 1

相关问题