javascript - 无法读取 HTML 和 Javascript 中未定义的属性 'index Of'

Question

我尝试使用按钮在页面上突出显示搜索表达式。谁能帮我解决这个问题吗？

Uncaught TypeError: Cannot read property 'indexOf' of undefined at highlight (?q=Python:11) at HTMLButtonElement.onclick (?q=Python:24)

JS代码:

function highlight(text) {
        var titles = document.getElementsByClassName('title');
        for (var x in titles) {
            var innerHTML = titles[x].innerHTML;
            var index = innerHTML.indexOf(text);
            if (index >= 0) {
                innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
                x.innerHTML = innerHTML;
            }
        }
    }

第 11 行:

var index = innerHTML.indexOf(text);

第 24 行:

<button onclick="highlight('{{ search_expression }}')">Highlight search expression</button>

Answer 1

不要使用 for .. in 来迭代元素列表，而是使用传统的 for 循环。

function highlight(text) 
{
        var titles = document.getElementsByClassName('title');
        for (var i=0; i < titles.length; i++) 
        {
            var title = titles[i];
            var innerHTML = title.innerHTML;

            // Work with title some more.
        }
}

有关发生的情况的解释，请参阅 Why is using "for...in" with array iteration a bad idea?