3

Intento crear y mostrar un elemento no mediante de html sino por javascript. mi idea es añadirle una funcion

    var loadFile;
    loadFile = document.createElement('input');
    loadFile.id = 'carga';
    loadFile.type = 'file';
    loadFile.name = "archivo";

para que quede como si lo escribiera por html añadiendo "onclick="myFunction()"

<input id="carga" type="file" name="archivo" style="color: transparent; width: 120px;" onclick="myFunction()">

como podría hacerlo?

3
  • por que en un input de tipo file? si ese es pensado para subir un archivo? por favor se mas claro en tu pregunta
    – user75901
    Commented el 27 ene. 2019 a las 20:40
  • Ya la edite @element. es posible?
    – Juan Ortiz
    Commented el 27 ene. 2019 a las 20:43
  • Juan @element tiene razón, no tiene sentido añadirle un onclik a un input del tipo file. El evento que se lanza al hacer click sobre él será la apertura del seleccionador de archivos.
    – A. Cedano
    Commented el 27 ene. 2019 a las 20:55

2 respuestas 2

3

Puedes usar addEventListener para asignar una función al elemento de forma programática. Claro está, esa función debe existir en el contexto para que no te dé error.

Sería esto simplemente:

loadFile.addEventListener("click", myFunction, false);

O sea, la asignas el listener onclick del elemento a la función myFunction.

Por ejemplo:

var mDiv = document.getElementById('myDiv');
var loadFile;
loadFile = document.createElement('input');
loadFile.id = 'carga';
loadFile.type = 'file';
loadFile.name = "archivo";
loadFile.setAttribute('style', 'color: transparent; width: 120px;');
loadFile.addEventListener("click", myFunction, false);

mDiv.appendChild(loadFile);

function myFunction() {
  console.log("Se presionó: " + this.id);
}
<div id="myDiv"></div>

2
  • buenisimo, solo me hace falta hacer que cuando se cargue la pagina se abra ese boton .
    – Juan Ortiz
    Commented el 27 ene. 2019 a las 21:43
  • @JuanOrtiz ¿que cuando se cargue la pagina se abra ese boton? Me temo que tendrías que explicar en otra pregunta de qué se trata, una vez lo hayas intentado y no hayas podido, claro está :). Me alegro de que te haya servido. Saludos.
    – A. Cedano
    Commented el 27 ene. 2019 a las 21:46
1

Te paso un ejemplo donde creas un elemento HTML de tipo input y lo añades dentro de un elemento DIV:

<script>
    function myFunction() {

        // Div principal
        var div = document.getElementById('div_principal');

        // Crear un nuevo elemento input
        var nuevoInput = document.createElement("input"); 

        // Agregar atributos al elemento html
        nuevoInput.id = 'carga';
        nuevoInput.type = 'file';
        nuevoInput.name = "archivo";

        // Añadir elemento input dentro del div
        div.appendChild(nuevoInput);

    }
</script>

<div id="div_principal"></div>
1
  • Muchas gracias element, sigo teniendo problemas para enviar código en las respuestas. Lo resolveré antes de volver a escribir una respuesta. Saludos Commented el 27 ene. 2019 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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