3

I want to achieve the already working "if-solution-result" of this:

window.onload = function(){

if(document.body.innerHTML.toString().indexOf('jeff') > -1){
     alert('marker1 gefunden');
}
if(document.body.innerHTML.toString().indexOf('lisa') > -1){
     alert('marker2 gefunden');
}
// it could go on and on from here...
};

in a more elegant way with a "for..." loop, but i didn't get it working.

var marker = ["paul", "maria", "jeff", "lisa"];
for (var i=0; i<marker.length; i++){
if(document.body.innerHTML(marker) > -1){
  alert((marker) + 'gefunden');
    }
}

I'm stuck on the basics on how to manage information inside of loops.

What this should do in the end (as my "if" coding shows):

Load HTML >> Check if one or more of the Arrays are found >> Open an alertbox with what is found.

Improve this question
1
  • 1
    document.body.innerHTML.indexOf(marker[i]), btw, you don't need toString() because the attribute innerHTML returns a String. Commented Apr 10, 2018 at 13:32

3 Answers 3

Reset to default
1

You forgot to use the iterator in the for loop. And indexOf.

When you use a for loop like this one you have i thats the iterator to see at which index your are. Then you can use i to select the correct value from your array with marker[i].

Example:

var marker = ["paul", "maria", "jeff", "lisa"];
for (var i=0; i<marker.length; i++){
if(document.body.innerHTML.indexOf(marker[i]) > -1){ // <-- right there
  alert((marker[i]) + 'gefunden');
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Two issues here,

  • Use textContent instead of innerHTML since innerHTML will also check for attribute values, etc
  • Use forEach to iterate array and includes or indexOf to check if the value is in body,

for example

var bodyText = document.body.textContent; //save the textContent in a value beforehand rather than doing it in a loop.
var marker = ["paul", "maria", "jeff", "lisa"];
marker.forEach( (s, i) => bodyText.includes(s) && alert('marker' + i + ' gefunden') );

If your browser doesn't support arrow functions or includes, then

marker.forEach( function(s, i) { //s is the item in iteration from the array and i is the index
   //check if the body has the text and && will make sure that second expression will get executed only if first one has succeeded
   bodyText.indexOf(s) != -1 && alert('marker' + i + ' gefunden');
});
Improve this answer

2 Comments

Making a fancy one-liner isn't gonna help a beginner ;)
@Skwal Its not that fancy :), but if OP has a problem understanding the same I can elaborate more.
0

As best practice, I recommend:

1, No var, no for loop, no double quote, play with arrow function

2, You should assign document.body.innerHTML to a variable first:

let html = document.body.innerHTML;

(Note that you may need to strip HTML tags for better result).

3, Check every item in marker

let marker = ['paul', 'maria', 'jeff', 'lisa'];

marker.filter((keyword) => {
  return html.indexOf(keyword) > -1;
}).forEach((keyword) => {
  alert(keyword);
});
Improve this answer

2 Comments

Thanks for your answer. Could you explain why this is "better"? Or is this just "different"?
@maschroom yes, it is the evolution of javascript, along with the influence of functional programming. Assigning document.body.innerHTML (or anything 2 levels up) to a variable asap is the rule of clean code. That also helps you improve performance. It no longer need to find the body property from document object, then find innerHTML from body, etc. I don't like to repeat the same story. You can google "javascript best practices" or simple setup the linter to get better recommendation.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.