Basic Image Generator
perchance.org

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.

  • VioneT@lemmy.worldMEnglish
    2·
    10 months ago

    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.worldOPEnglish
      1·
      10 months ago

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

      • VioneT@lemmy.worldMEnglish
        2·
        10 months ago

        So, on your:

        <div>[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><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
}