Cannot read property 'index Of' of undefined in HTML and Javascript

Question

I try to highlight on my page the search expression with a button. Can anyone help me please to solve this problem?

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

The JS code:

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;
            }
        }
    }

Line 11:

var index = innerHTML.indexOf(text);

Line 24:

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

Possible duplicate of Why is using "for...in" with array iteration a bad idea? — NineBerry
– NineBerry, Commented Jun 7, 2018 at 9:05
@NineBerry well that's the correct answer, but the question is not the same I think :) — Fabio Lolli
– Fabio Lolli, Commented Jun 7, 2018 at 9:11

NineBerry · Accepted Answer · 2018-06-07 10:22:47Z

2

Don't use for .. in to iterate over the list of elements, but a traditional for loop.

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.
        }
}

For an explanation what is happening see Why is using "for...in" with array iteration a bad idea?

edited Jun 7, 2018 at 10:22

answered Jun 7, 2018 at 9:11

NineBerry

28.8k4 gold badges68 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabio Lolli Over a year ago

I'd just like to add you could replace for .. in with for .. of, which is for looping enumerables. Differently from for .. in, with for (let x of yourArray) in each loop x would be assigned a value in the array - but I'd reccomend looping through indexes, it's more explicit and you're sure about what is happening.

NineBerry Over a year ago

for .. of is not supported in Internet Explorer, so not an alternative if you cannot control what browsers are used. One could use foreach() on the collection instead.

Gergely Kudó Over a year ago

Thanks a lot, working with the help of the other answer below.

lipp · Accepted Answer · 2018-06-07 09:05:57Z

0

innerHTML might be undefined. You have to check if innerHTML is defined before calling innerHTML.indexOf

var innerHTML = titles[x].innerHTML
if (innerHTML) {
  var index = innerHTML.indexOf(text)
  ...
}

answered Jun 7, 2018 at 9:05

lipp

5,9962 gold badges23 silver badges32 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'index Of' of undefined in HTML and Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related