1
image persistence (perchance.org)
submitted 1 year ago by to c/perchance@lemmy.world
3 comments fedilink hide all child comments
 

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.

you are viewing a single comment's thread
view the rest of the comments
[–] 2 points 1 year ago (2 children)

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);
    }
  }
  • permalink
  • fedilink
  • source
  • hideshow 2 child comments
    •
  • [–] [S] 1 point 1 year ago (1 child)

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

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •
  • [–] 2 points 1 year ago

    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
}
  • permalink
  • fedilink
  • source
  • parent