javascript for loop comparing dom element text to array

Question

I'm comparing what's in a DOM element's innerHTML to what's in a static text array. What's in the element always matches an entry in the text array.

<p id="main1">b</p>

var textArr = ["<p>a</p>","<p>b</p>","<p>c</p>"];
if (main1.innerHTML == textArr[0]) {
            return 0;
        } else if (main1.innerHTML == textArr[1]) {
            return 1;
        } else if (main1.innerHTML == textArr[2]) {
            return 2;
        } else if (main1.innerHTML == textArr[3]) {
            return 3;
        } else {
            return 0;
}
//returns 1

I'll soon be adding entries to textArr and realize a for loop is much better practice in general for such a case anyway. However, my conditional statement is never hit with the loop.

var index;
for (index = 0; index < textArr.length; ++index) {
    if (main1.innerHtml == textArr[index]) {
        return index;
    } 
}
//does nothing

How can I check what's in the element against what's in the array?

You may want to invest into using textContent over innerHTML, simply because innerHTML can return nested tags, i.e. div.innerHTML will, or can contain <p>text</p>, etc, you get the idea... Also, with the else clause, you may want to return -1? ... Or alternatively, return textArr.indexOf(main1.textContent). — JO3-W3B-D3V
– JO3-W3B-D3V, Commented Dec 30, 2018 at 16:05
Your code "does nothing" because innerHTML not innerHtml. Also there is a builtin method for that Array.prototype.indexOf (which even provides more consistent output returning -1 when element is not in array) — Yury Tarabanko
– Yury Tarabanko, Commented Dec 30, 2018 at 16:09
@YuryTarabanko - This is the correct answer. I can't count the number of times I looked for case mismatches. Thank you — froggomad
– froggomad, Commented Dec 30, 2018 at 16:16
@YuryTarabanko I'm glad you picked up on that, I totally missed that! — JO3-W3B-D3V
– JO3-W3B-D3V, Commented Dec 30, 2018 at 16:16

JO3-W3B-D3V · Accepted Answer · 2018-12-30 16:20:50Z

1

This does the job, as I've said within the comments, using ```innerHtml`` can be a bad idea if you only want the text content of the relevant HTML element. If you want the nested tags also, then sure, it shouldn't be a problem at all, just be careful which one you use, there are times where you will want nested HTML elements returned as a part of the string, other times you won't, etc.

const textArr = ["a", "b", "c"];
const el = document.getElementById("main1");
const getIndex = () => textArr.indexOf(el.textContent);

console.log(getIndex());

<p id="main1">b</p>

answered Dec 30, 2018 at 16:20

JO3-W3B-D3V

2,13213 silver badges31 bronze badges

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

2 Comments

froggomad Over a year ago

Thank you, very helpful. I'm really bad at asking questions... I actually have the tags included in the text array because I couldn't figure out how to just get the text

JO3-W3B-D3V Over a year ago

@froggomad You're very welcome! :) .. I actually remember when I was learning, way back when, for some time I was a little unsure as to how to get the text with no HTML tags in it, turns out it was actually this simple, haha.

Jack Bashford · Accepted Answer · 2018-12-30 16:10:14Z

1

Just use Array.prototype.indexOf() like so:

return textArr.indexOf(main1.textContent);

This will return the index of the matching text from the array and the main1 element.

answered Dec 30, 2018 at 16:10

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

gaaaaaa · Accepted Answer · 2018-12-30 16:13:58Z

1

You were almost there.

var main = document.getElementById("main1").innerHTML;
var textArr = ["a", "b", "c"]


function check(value, array) {

  for (i = 0; i < textArr.length; i++) {
    if (value == array[i]) {
         return value + " is equal to " + array[i]
  } 
 }
}

document.write(check(main, textArr))
document.write("</br>" + check("a", textArr))
document.write("</br>" + check("h", textArr))

<p id="main1" style="display: none">b</p>

answered Dec 30, 2018 at 16:13

gaaaaaa

3661 silver badge16 bronze badges

Comments

Aria · Accepted Answer · 2018-12-30 16:15:58Z

1

Try this Array.prototype.find():

var found = textArr.find(function(element) { 
  return main1.textContent == element;
});

it will return the content of matching element.

answered Dec 30, 2018 at 16:15

Aria

3,8541 gold badge28 silver badges55 bronze badges

2 Comments

JO3-W3B-D3V Over a year ago

Would this be more efficient than using indexOf though? I mean in such a small scenario, sure it probably makes 0 difference with regards to performance, I'm actually not 100% sure what would be more efficient.

Aria Over a year ago

It will return undefined and the indexOf() will return -1 if there is no matching element, anyway I don't think the performance is important in that situation, think about which one is more comfortable for you.

omoshiroiii · Accepted Answer · 2018-12-30 16:17:06Z

0

main1 isn't defined. I would just set that innerHTML to a variable and then compare.

var arr = ["a", "b", "c", "d"];
var answer = document.getElementById("main1").innerHTML;
var index;
for (index = 0; index < arr.length; index++) {
    if (answer == arr[index]) {
        return index;
    } 
}

answered Dec 30, 2018 at 16:17

omoshiroiii

6835 silver badges12 bronze badges

1 Comment

froggomad Over a year ago

main1 actually is defined in my code and I forgot to include it here, but regardless doesn't need to be explicitly defined as id's are automatically globally accessible as was pointed out in another answer by someone smarter than me

Collectives™ on Stack Overflow

javascript for loop comparing dom element text to array

5 Answers 5

2 Comments

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related