0

Tengo este script escrito en jquery y necesito pasarlo a javascript, pero no se como hacerlo:

$("#url").change(function(){
   var url = $(this).val();    
   $("#imagen").html('<img src="'+ url +'" alt="imagen">')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<input type="url" placeholder="Ingrese URL de la imagen" id="url">
<div id="imagen"></div>

2
  • Intenta aprender el lenguaje JQuery y Javascript, no lo tomes a mal, pero la idea no es hacerle el trabajo, la idea es aprender y StackOverflow está echo para resolver dudas de un error o algo por el estilo, no hacer el trabajo a los demás. Commented el 28 mar. 2019 a las 20:53
  • Gracias @StivenGómez y gracias tambien por tu propuesta y estoy aprendiendo. Igualmente si lees bien, dije que no se como hacerlo hacerlo que es muy distinto a "haganme el trabajo por favor". Si lees la respuesta de abajo, Gian no solo me da el ejemplo si no que ademas deja dos link de referencia para leer y APRENDER. Pero gracias por tu comentario!
    – user101604
    Commented el 28 mar. 2019 a las 21:23

1 respuesta 1

5

Aquí tienes la forma en javascript, te adjunto las referencias para que puedas investigar un poco más:

<script type="text/javascript">
    prueba();

    function prueba()
    {
        document.addEventListener('DOMContentLoaded',function()
        {
            document.getElementById("url").onchange = eventoUrl;
        },false);
    }

    function eventoUrl(e)
    {
        //var url = document.getElementsByTagName("input")[0].value; //Es una forma
        var url = e.target.value; // utilizando el parámetro de retorno que es el elemento input
        document.getElementById("imagen").innerHTML = '<img src="'+ url +'" alt="imagen">'
    }
</script>

https://developer.mozilla.org/en-US/docs/Web/Events/change https://stackoverflow.com/a/2554171/9051442

Saludos!

5
  • el url lo podría sacar de e.target.value no? (para no andar buscando el input) Commented el 28 mar. 2019 a las 20:53
  • 1
    Claro, lo modificaré para que lo tome en cuenta. Gracias!
    – Gianm30
    Commented el 28 mar. 2019 a las 20:55
  • Gracias Gian, estoy teniendo un problema que no me pasaba, cuando me trae la imagen el input toma el tamaño de esta.
    – user101604
    Commented el 28 mar. 2019 a las 21:09
  • 1
    Podrías intentar utilizando la propiedad size en el input para que no crezca, ejemplo: <input size="5">. Saludos!
    – Gianm30
    Commented el 28 mar. 2019 a las 21:20
  • aaaah... es verdad, no le habia agregado la clase de bootstrap form-control
    – user101604
    Commented el 28 mar. 2019 a las 21:24

Tu Respuesta

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