Javascript Load an Image from url and display

Question

I want to preface this with the fact that I am very very new to JavaScript  I appreciate your patience with me   I m trying to create a script that allows a user to input a name into a text-area  press submit and an image is displayed based on that name    I managed to come up with this    lt html gt   lt body gt   lt form gt   lt input type  text  value    id  imagename  gt   lt input type  button  onclick  window location href  http   webpage com images   document getElementById  imagename   value    png   value  GO  gt   lt  form gt   lt  body gt   lt  html gt    Which almost does exactly what I need -loads an image around what a user inputs  But what I want is not for the image to open in a new window  or download to my computer - I want it to display on the page when clicked as an image like the example here   I m sure that my inexperience with Javascript is the main cause of my being unable to figure this out  The script above is as far as I can get without screwing things up  Any help is appreciated

User · Answer

First  I strongly suggest to use a Library or Framework to do your Javascript  But just for something very very simple  or for the fun to learn  it is ok   you can use jquery  underscore  knockoutjs  angular   Second  it is not advised to bind directly to onclick  my first suggestion goes in that way too   That s said What you need is to modify the src of a img in your page   In the place where you want your image displayed  you should insert a img tag like this        Next  you need to modify the onclick to update the src attribute  The easiest way I can think of is like his  onclick   document getElementById  image-placeholder   src    http   webpage com images     document getElementById  imagename   value     png    Then again  it is not the best way to do it  but it is a start  I recommend you to try jQuery and see how can you accomplish the same whitout using onclick  tip    check the section on jquery about events   I did a simple fiddle as a example of your poblem using some google logos    type 4 o 3 in the box and you ll two images of different size   sorry   I have no time to search for better images as example   http   jsfiddle net HsnSa

User · Answer

Are you after something like this     lt html gt    lt head gt       lt title gt Z Test lt  title gt    lt  head gt    lt body gt    lt div id  img home  gt  lt  div gt    lt button onclick  addimage    type  button  gt Add an image lt  button gt    lt script gt  function addimage         var img   new Image        img src    https   www google com images srpr logo4w png      img home appendChild img      lt  script gt   lt  body gt

User · Answer

You were just missing an image tag to change the  src  attribute of        lt html gt   lt body gt   lt form gt   lt input type  text  value    id  imagename  gt   lt input type  button  onclick  document getElementById  img1   src             http   webpage com images     document getElementById  imagename   value    png       value  GO  gt   lt br  gt   lt img id  img1  src  defaultimage png    gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

When the button is clicked  get the value of the input and use it to create an image element which is appended to the body  or anywhere else      lt html gt   lt body gt   lt form gt       lt input type  text  id  imagename  value      gt       lt input type  button  id  btn  value  GO    gt   lt  form gt       lt script type  text javascript  gt          document getElementById  btn   onclick   function                 var val   document getElementById  imagename   value                  src    http   webpage com images     val    png                   img   document createElement  img                 img src   src              document body appendChild img                  lt  script gt   lt  body gt   lt  html gt    FIDDLE  the same in jQuery       btn   on  click   function         var img       lt img   gt     src    http   webpage com images         imagename   val      png         img appendTo  body

User · Answer

You have to right idea generating the url based off of the input value  The only issue is you are using window location href  Setting window location href changes the url of the current window  What you probably want to do is change the src attribute of an image    lt html gt   lt body gt   lt form gt     lt input type  text  value    id  imagename  gt     lt input type  button  onclick  var image   document getElementById  the-image    image src  http   webpage com images   document getElementById  imagename   value    png   value  GO  gt   lt  form gt   lt img id  the-image  gt   lt  body gt   lt  html gt

User · Answer

Add a div with ID imgDiv and make your script   document getElementById  imgDiv   innerHTML   lt img src   http   webpage com images   document getElementById  imagename   value    png   gt     I tried to stay as close to your original as tp not overwhelm you with jQuery and such

[javascript] Javascript: Load an Image from url and display

Examples related to javascript

Examples related to image

Examples related to load