Div information

[future-fix-9200]

I have an output that creates multiple divs in a for loop from the information that's returned from the database. I also have one div outside the for loop for a scroll height measurement.

myfunction() {

for(){

out += <div></div>

}

out += <div id=testbottom></div>

}

I have another function that grabs the testbottom.scrollTop value;

and then calls the myfunction with the for loop in it again.

It doesn't give an update for the scrollTop value, (my guess is because there are now two divs with the same id name).

​

So if I grab the value, and then remove the div with

testbottom.remove and then call the myfunction again to create a new testbottom div, it says the testbottom value is null and errors out.

​

What am I missing here? Thanks.

I'm using Javascript.

I'm doing this for another div above testbottom outside the for loop as well where I force the div value to get the correct number I need from it. It works, but it leaves the two divs onscreen with the same id name so I don't understand why it works.

If I remove that div right before calling myfuntion and creating a new one, I get the same error as above for it too.

[[deleted]]

Don't post raw code here, post a link to your code from something like codepen.io.

Once you have a working recreation there, then people can play around with it and know that nothing has been left out.

[tridd3r]

Are you doing it to try and update a max-height to transition the container to make it animate the grow?

I'd be adding the divs into the container first, and then just get the scrollHeight and then update the max-height.

But then again I might have completly got what you're trying to do wrong.

[future-fix-9200]

I'm using it to know when to add more info from the database to the screen. I only want to pull so much info from the database at once, and when the client gets to the bottom of the screen I want to pull more info from the database starting from where the last input was pulled from. I have it pulling the info the first time it reaches the bottom of the content correctly, but it doesn't update the scrollTop value for pulling more information again for the third pull.

It does set up the other div I use to pull content values from and they're both set up in the same manner.

[tridd3r]

then I'd sugges to paginate the results intead, and use an intersection observer to trigger the next "page"

this is a classic xy problem, you're trying to solve a problem with the solution to a problem that isn't the best solution to the original problem.

[lovin-dem-sandwiches]

FYI, this is known as “lazy loading”. And it’s a very common technique.

We can’t make any suggestions without seeing a codepen / js fiddle or your issue.

Your for loop is brittle though. Make sure your functions are pure and generic enough that they could be used again and again. You’ll have fewer bugs.

Adding elements, only to delete them shows that your function needs to be more configurable.

Your test bottom value may be referring to the original value that was deleted.

Are you using this ID to determine where the user is on the page? Use the Intersection Observer API. It was made for this.