problema al mostrar imagen en DOM.

[esaenz22]

buenas. habia publicado un tema de como colocar un estilo en un DOM. alli pude mostrar el estilo en un input. pero ahora se me presento otro problema. cuando hago el upload multiple, me sale un texto X que es obviamente para remover el input file.

cuando le remplazo el texto x por una imagen de borrar en el innerHTML, no remueve los input files de la funcion js.

he creado un elemento img. lo instancie en el appendchild y me muestra un mensaje como si no reconociera la imagen.

[object HTMLImageElement]

este es mi codigo.

Código Javascript:

//creamos un elemento imagen.
    imagen = document.createElement('img');
    imagen.src = "../imagenes/delete.png";
    
//Ahora creamos un link para poder eliminar un campo que ya no deseemos
   a = document.createElement('a');
//El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
   a.name = nDiv.id;
//Este link no debe ir a ningun lado
   a.href = 'javascript:void(0);';
//Establecemos que dispare esta funcion en click
   a.onclick = elimCamp;
   a.className = 'enlaces';
   
//Con esto ponemos el texto del link
   a.innerHTML = imagen;
//Bien es el momento de integrar lo que hemos creado al documento,
//primero usamos la función appendChild para adicionar el campo file nuevo
   nDiv.appendChild(nCampo);
//Adicionamos el Link
   nDiv.appendChild(a);
 

agradeceria si me ayudaran con mi tema.

saludos.

[maycolalvarez]

innerHTML admite solo strings, no puedes asignarle la instancia de un objeto, ¿porque no usas appendChild?:

//a.innerHTML = imagen;
a.appendChild(imagen);

a sigue siendo un nodo de DOM, aplicaría lo mismo

[devnieL]

Sí lo reconoce, tienes que usar la propiedad .nodeValue

[esaenz22]

gracias por las respuestas maycolalvarez y devnieL.

instancie el objeto img.

Código HTML:

a.appendChild(imagen);
 

y me da error.

devnieL, como colocaria la propiedad .nodeValue ?.

saludos.

[devnieL]

la verdad que no entiendo muy bien tu problema, pero si no me equivoco creo que quieres reemplazar un link por una imagen, o que al a hacer clic en la imagen se elimine un nodo. En ese caso no utilices la etiqueta <a>, solo crea la imagen y luego le agregas el evento onclick :

Código HTML:

img.addEventListener("click",function(){
// Código para eliminar el nodo
},false);

Para colocarlo le agregas estilo, etc. Si explicas mejor tu problema te puedo ayudar, así también practico mi javascript

[esaenz22]

gracias por la respuesta devnieL. no especifique bien el problema.

dentro del vinculo colocar la imagen y de alli se elimine el nodo cuando hago clic en la imagen de borrar.

saludos.

[devnieL]

Bueno, creo que así es. Recuerda que solo a ciertos elementos puedes asignarle el evento onclick, recomendaría revises el método addEventListener.

Código Javascript:

window.onload = function(){
var img = document.createElement("img");
img.src = "../img/icons/book_16.png";
 
as = document.createElement("a");
as.name = "otro";
as.href = 'javascript:void(0);';
 
as.addEventListener("click",function(){
    // Eliminar nodo
},false);
 
   as.appendChild(img);
 
document.getElementById("caja").appendChild(as);
}
 

[esaenz22]

gracias por la respuesta. mejor le explico con detalles de que se trata la aplicacion que estoy desarollando.

tengo mi formulario de upload. hay un enlace para agregar mas input files. habia mencionado que cuando reemplazo el texto por una imagen (osea colocar dento del vinculo una imagen) me da error por que la propiedad del innerHTML solo acepta cadenas.

refrequé la pagina y cuando quise agregar mas imagenes, no me genero ningun input file.

para no confundirlo, el ejemplo del upload multiple me guie de un aporte de cristalab.

Subir multiples archivos con php

y este es el codigo que he modificado.

Código Javascript:

var numero = 0; //Esta es una variable de control para mantener nombres
            //diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
   return (!evt) ? event : evt;
}
 
//Aqui se hace lamagia... jejeje, esta funcion crea dinamicamente los nuevos campos file
addCampo = function () { 
//Creamos un nuevo div para que contenga el nuevo campo
   nDiv = document.createElement('div');
//con esto se establece la clase de la div
   nDiv.className = 'imagenes';
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
   nDiv.id = 'file' + (++numero);
//creamos el input para el formulario:
   nCampo = document.createElement('input');
//le damos un nombre, es importante que lo nombren como vector, pues todos los campos
//compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
   nCampo.name = 'imagenes[]';
   nCampo.className = 'formularios';
//Establecemos el tipo de campo
   nCampo.type = 'file';
   
 
    window.onload = function(){
    var img = document.createElement("img");
    img.src = "../img/icons/book_16.png";
    
    a = document.createElement('a');
    //El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
    a.name = nDiv.id;
    //Este link no debe ir a ningun lado
    a.href = 'javascript:void(0);';
    //Establecemos que dispare esta funcion en click
    //a.onclick = elimCamp;
    a.className = 'enlaces';
    
    a.addEventListener("click",function(){
    // Eliminar nodo
    },false);
    
    a.appendChild(img);
    
    //Bien es el momento de integrar lo que hemos creado al documento,
    //primero usamos la función appendChild para adicionar el campo file nuevo
    nDiv.appendChild(nCampo);
    //Adicionamos el Link
    nDiv.appendChild(a);
    //Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien
    //con esta función obtenemos una referencia a ella para usar de nuevo appendChild
    //y adicionar el div que hemos creado, la cual contiene el campo file con su link de eliminación:
    container = document.getElementById('adjuntos');
    container.appendChild(nDiv);    
    
    }
   
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
elimCamp = function (evt){
   evt = evento(evt);
   nCampo = rObj(evt);
   div = document.getElementById(nCampo.name);
   div.parentNode.removeChild(div);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) { 
   return evt.srcElement ?  evt.srcElement : evt.target;
}
 

saludos.