0

el addEventListener change de mi input de tipo file nunca se activa.

const button = dropArea.querySelector("button");
const input = dropArea.querySelector("#input-file");
let files;

button.addEventListener("click", (e) => {
    input.click(); /* abrir el explorador de archivos */
});

input.addEventListener("change", (e) => { /* cuando se carga un archivo usando el boton*/
    files = input.files;
    dropArea.classList.add("active");
    showFiles(files);
    dropArea.classList.remove("active");
});

el código lo copie tal cual del tutorial: https://www.youtube.com/watch?v=qWFwYLUGWrc minuto 36:58 en este tutorial funciona correctamente. me di cuenta que cuando se acciona el evento "click" la pagina se recarga no se si tendrá algo que ver

2
  • 1
    Hola Sebastian, es recomendable poner tu código de manera reproducible o sea completo con html y css para poder entender mejor el problema.
    – Ali
    el 30 ene. 2022 a las 3:24
  • Tu código funciona bien con un ejemplo minimo, completo y verificable, tal como he puesto aqui: jsfiddle.net/hrav2sy0 Compruebalo tu mismo. Lo que quizas te confunde es que despues del showFiles la clase vuelve a borrarse y no parece quese haya hecho nada. En mi ejemplo veras que cambiar el color del background y luego da un error porque no tengo esa funcion showFiles definida, pero eso indica que ha entrado bien en el change.
    – masterguru
    el 30 ene. 2022 a las 8:42

2 respuestas 2

0

Tengo conocimiento de que cuando quieres agregar una clase a un elemento a través de classList.add() debes colocar el nombre de la clase iniciando con un punto (.)

dropArea.classList.add(.active)

Prueba con eso y me avisas que tal te va.

0

ya lo solucione, el problema era que el evento "click". lo cambie por un evento "mousedown" y la pagina ya no se recarga y funciona correctamente. quedaria asi:

button.addEventListener("mousedown", (e) => {
    input.click();
});

gracias a los que respondieron de todas formas, y perdón por explicarme tan mal en la pregunta y no agregar todo el código necesario

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.