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
    el 27 ene. 2019 a las 20:40
  • Ya la edite @element. es posible?
    – Juan Ortiz
    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
    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
    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
    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 el 27 ene. 2019 a las 21:07

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.