Javascript while loop over ElementIds from DOM until first empty Element

Easy task i guess but i am new to this and am stuck. I want to iterate through some ElementIds of a webpage to extract the text within.

The ElementIds i am looking for are like this:

"p000", "p001", "p002", etc. (I guess it would go until "p999")

This is what i have so far.

var totalText=[]
while(text===""):
    var text=document.getElementById("p0003");
    totalText.push(text);
}

Now i would like to iterate through the ElementIds as described and stop as soon as text is empty which means there is no Element "p091" anymore and the loop stops and does not continue until "p999".

Solution

You can add a class to each element (p000 through to p999) by adding the class attribute to all of them. Then use document.getElementsByClassName(). Querying the DOM is an expensive operation, so doing it a minimal amount of times is often a good idea. Also, document.getElementsByClassName() does the logic you're after, so there is no need to re-invent the wheel.

Here an example:

var paragraphs = Array.from(document.getElementsByClassName('info-para'));
console.log(paragraphs);

<p class="info-para" id="p0">0</p>
<p class="info-para" id="p1">1</p>
<p class="info-para" id="p2">2</p>
<p class="info-para" id="p3">3</p>
<p class="info-para" id="p4">4</p>

Note: Above, I have used a method called Array.from(), which returns an array given an array-like collection. That's because getElementsByClassName() returns a HTMLCollection, which is like an array, but not quite. So, in order to turn the HTMLCollection into an actual array you can use Array.from().

EDIT:

In order to get an array of strings you can loop through the array you retrieved, and get the innerText of each element, and .push() that into a new array like so:

var paragraphs = Array.from(document.getElementsByClassName('info-para'));

var texts = [];

for(var elem of paragraphs) { // loop through each element in paragraphs array
  texts.push(elem.innerText); // get the text of the current element, and push it to the texts array
}
console.log(texts);
console.log(texts.join(', '));
console.log(paragraphs);

<p class="info-para" id="p0">0</p>
<p class="info-para" id="p1">1</p>
<p class="info-para" id="p2">2</p>
<p class="info-para" id="p3">3</p>
<p class="info-para" id="p4">4</p>

Once you become more comfortable with JS, you can write the code above more elegantly by providing a mapping method to the Array.from() method and using destructuring assignment like so:

const texts = Array.from(document.getElementsByClassName('info-para'), ({innerText}) => innerText);
console.log(texts);

<p class="info-para" id="p0">0</p>
<p class="info-para" id="p1">1</p>
<p class="info-para" id="p2">2</p>
<p class="info-para" id="p3">3</p>
<p class="info-para" id="p4">4</p>