c/perchance · by belf13@lemmy.world · 1y

image persistence

i have some interesting side effects here in https://perchance.org/simple-txt2img where adding another row of images refreshes all the images and calling update() only re-generates the last row of images.

how do i add a row of images without re-generating the existing ones? for example if i want to generate until i like the image then create another row to generate more until i like those.

1 points · 3 comments · view on lemmy.world

3 Comments

VioneT@lemmy.world · 2 pts · 1y (2 replies)

So, on the .flex container, every time you add the output on the innerHTML, it would essentially re-run the 'evaluation' of the square brackets, which would also update the container - which updates the previous images. Best way is to not alter the InnerHTML by concatenating and use .appendChild instead. Ex:

  function addImageRow() {
    let con = document.createElement('div');
    con.innerHTML = output
    document.querySelector(".flex").appendChild(con);
  }

But since this wouldn't have any square brackets, you cannot use the regular update() function to reload them. Here's a function to update them:

function updateRows() {
    let numRows = document.querySelector(".flex").querySelectorAll('div').length
    document.querySelector(".flex").innerHTML = ''
    for (let i = 0; i < numRows; i++) {
      let con = document.createElement('div');
      con.innerHTML = output
      document.querySelector(".flex").appendChild(con);
    }
  }

belf13@lemmy.world · 1 pts · 1y (1 reply)

nice, the add works perfectly but updae rows resets it to one row.. can i just refresh the last row?

VioneT@lemmy.world · 2 pts · 1y

So, on your:

<div class="flex">[output]</div>

You need to enclose the [output] in a div for the Update Rows to work since it looks for the number of div on the .flex container like so:

<div class="flex"><div>[output]</div></div>

Also, you changed the start of the 'for loop' on the update rows with let i = numRows - 1 which would mean it can only update one row since the loop terminates if it exceeds the numRows. Just use the let i = 0.

If you want to only update the 'last' row, you can do:

function updateLast() {
  let lastRow = [...document.querySelector(".flex").querySelectorAll('div')].at(-1)
  lastRow.innerHTML = output
}