Cómo usar el elemento que llama a eventlister en una función, para agregar un nuevo elemento.
Ejemplo:
window.onload = function() { Array.from(document.getElementsByClassName('image_add_product')).forEach(function(element,index) { element.addEventListener("change", input_change, false); }); }; Ahora necesito usar ese element dentro de la función input_change , para agregar un nuevo intervalo de elementos. Usando element.parentNode.insertBefore(span, this.nextSibling) , obtenga el element is not defined , usando this.parentNode.insertBefore(span, this.nextSibling) , obtenga el error Cannot read properties of undefined (reading 'insertBefore') .
¿Cuál es la forma correcta de hacer eso? Por favor, vea los comentarios sobre el código.
function input_change(evt) { //with this operator i can access the properties of element, but... var file = this.files[0]; if(file.size > 1572864) { console.log("Imagem exede o tamanho máximo permitido de 1,5 MB"); this.value = ""; return false; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { var span = document.createElement('span'); span.innerHTML ="<img src='...'/>"; /*here is the problem how append span using element as reference*/ this.parentNode.insertBefore(span, this.nextSibling); }; })(file); reader.readAsDataURL(file); return true; }El problema es que this dentro de la carga del archivo es el archivo, NO this fuera de él.
document.querySelectorAll('.image_add_product').forEach(function(element) { element.addEventListener("change", input_change, false); }); function input_change(evt) { var elem = this; var file = elem.files[0]; if (file.size > 1572864) { console.log("Imagem exede o tamanho máximo permitido de 1,5 MB"); this.value = ""; return false; } var reader = new FileReader(); reader.onload = function(e) { var span = document.createElement('span'); span.innerHTML = "HELLO<img src='...'/>"; elem.parentNode.insertBefore(span, elem.nextSibling); }; reader.readAsDataURL(file); return true; } <label for="img1"> <input type="file" id="img1" class="image_add_product" > </label> <label for="img2"> <input type="file" id="img2" class="image_add_product" > </label>