Question

<script>
    document
            .getElementById('country')
            .addEventListener('change', function() {
                'use strict';
                var value1 = this.value;
                console.log(value1);
                var vis = document.querySelectorAll('.input-group-addon'),
                country = document.getElementsByClassName(value1);
                console.log(country.length);
                // Point One
                var i;
                if (vis !== null) {
                    for (i = 0; i < vis.length; i++)
                        vis[i].className = 'input-group-addon inv';
                    console.log(country.length);
                    // Point Two
                }
                if (country !== null) {
                    for (i = 0; i < country.length; i++) {
                        country[i].className = 'input-group-addon';
                        // Point Three
                    }
                }
            });
    </script>

这一直困扰着我一段时间。我想在

中获取所选值的值

document.querySelectorAll('.input-group-addon')

并在

中找到匹配的类名

document.getElementsByClassName(value1)

国家的节点列表在第一点可用，在第二点变为空。

我的代码中是否存在基本的逻辑或语法错误？

Answer 1

并在第二点更改为null

我认为你的意思是列表是空的。该变量不应该神奇地成为null。

getElementsByClassName返回live HTMLCollection。这意味着它将始终反映文档的当前状态。如果更改元素的类名，它将自动添加到集合中或从集合中删除。

如果您不想这样，请使用querySelectorAll，它会返回不直播的集合，或convert the collection to an array。

变量值在函数内部随时间变化而无需重新分配

1 个答案: