英文:
How can I append two copies of the same image in one function?
问题
这是一段JS代码片段，一直让我遇到问题。我试图添加两个带有不同动态生成HTML标签的图像层，但浏览器拒绝正确渲染代码。
期望的结果是
dropzone.append(img);
dropzone.append(imgIn);
添加两个不同索引的图像，并在拼图中重复数百次。
这是此代码用于的Android应用程序的链接 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); //这不会附加
dropzone.append(imgIn); //这会附加
});
}
}
英文:
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
答案1
得分: 1
你可以创建一个元素，并在附加时克隆它。然后更新原始元素并附加它。
const img = document.createElement('img');
const dropzone = document.querySelector('#dropzone');
const imageId = 'imageId_';
img.setAttribute("id", imageId + '1');
img.setAttribute("width", '100px');
img.src = 'https://via.placeholder.com/100';
dropzone.append(img.cloneNode());
img.setAttribute("id", imageId + '2');
img.setAttribute("width", '100px');
img.src = 'https://via.placeholder.com/100/ff0000';
dropzone.append(img);
<div id="dropzone"></div>
英文:
You could create just one element and clone it when you append. Then update the original element and append that.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-html -->
<div id="dropzone"></div>
<!-- end snippet -->
答案2
得分: 0
不存在名为`imgIn`的元素，所以该元素不会渲染。你应该对两个元素都使用`img`。
应该将循环放在事件侦听器内，而不是添加多个执行相同操作的侦听器。
英文:
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);
}
});
}
答案3
得分: 0
首先的问题是你创建了一个"custom"元素，因为你创建了一个带有"id"为"imgIn"的元素，所以不会呈现图像。
你可以使用cloneNode并更改id，这样就不必重复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>
<details>
<summary>英文:</summary>
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][1] and alter the id so you do not have to duplicate id.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-html -->
<div id="dropZone"></div>
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论