Question 42869 in Html Question posted in
Some basic documentation can be found here.

How can I append two copies of the same image in one function? – Html

this is a js snippet of code that’s been giving me problems. I’m attempting to append 2 img layers with different dynamically generated HTML tags but browsers refuse to render the code correctly.
the desired outcome is for

dropzone.append(img);
dropzone.append(imgIn);

append 2 images with different 2 indexes and do this hundreds of times in a mosaic
here is a link to the android app this code is for https://www.webintoapp.com/store/107768

function hueChange() {
  for(let image = 0; image < mosaicCount; image++) {
    let screenWidth = window.innerWidth;
    reader.addEventListener('loadend', () => {
      let img = document.createElement('img');
      let imgIn = document.createElement('imgIn');
      img.setAttribute("id", image)
      img.setAttribute("width", screenWidth/16 + "px")
      imgIn.setAttribute("id", "imgIn" + image)
      imgIn.setAttribute("width", screenWidth/16 + "px")
      img.src = reader.result;
      imgIn.src = reader.result;

      dropzone.append(img);   //this doesn't append
      dropzone.append(imgIn); //this appends
Tags:

3

Answers


  1. 0

    You could create just one element and clone it when you append. Then update the original element and append that.

    const img = document.createElement('img');
const dropzone = document.querySelector('#dropzone');
const imageId = 'imageId_';

img.setAttribute("id", imageId + '1');
img.setAttribute("width", '100px'); // screenWidth / 16 + "px");
img.src = 'https://via.placeholder.com/100'; // reader.result;
dropzone.append(img.cloneNode());

img.setAttribute("id", imageId + '2');
img.setAttribute("width", '100px'); // screenWidth / 16 + "px");
img.src = 'https://via.placeholder.com/100/ff0000'; // reader.result;
dropzone.append(img);
    <div id="dropzone"></div>
    Login or Signup to reply.
  2. 0

    There’s no such thing as an imgIn element, so that element doesn’t render. You should use img for both elements.

    You should put the loop inside the event listener, instead of adding multiple listeners that all do the same thing.

    function hueChange() {
  reader.addEventListener('loadend', () => {
    let imgWidth = window.innerWidth / 16 + "px";

    for (let image = 0; image < mosaicCount; image++) {
      let img = document.createElement('img');
      let imgIn = document.createElement('img');
      img.setAttribute("id", image)
      img.setAttribute("width", imgWidth)
      imgIn.setAttribute("id", "imgIn" + image)
      imgIn.setAttribute("width", imgWidth)
      img.src = reader.result;
      imgIn.src = reader.result;

      dropzone.append(img);
      dropzone.append(imgIn);
    }
  });
}
    Login or Signup to reply.
  3. 0

    Firs problem is you are creating a "custom" element since you are creating an element with "imgIn" so that is not going to render and image.

    You can use cloneNode and alter the id so you do not have to duplicate id.

    const dropzone = document.querySelector('#dropZone');

const screenWidth = window.innerWidth;
const image = 1;

const img = document.createElement('img');
img.setAttribute("id", 'img' + image)
img.setAttribute("width", screenWidth / 16 + "px")
img.src = 'http://placekitten.com/200/300'; // reader.result;
dropzone.append(img);

const imgIn = img.cloneNode(true);
imgIn.setAttribute("id", 'imgIn' + image)
dropzone.append(imgIn);
    <div id="dropZone"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search