Programmatically change the src of an img tag

Question

How can I change the src attribute of an img tag using javascript    lt img src     template edit png  name edit-save  gt    at first I have a default src which is     template edit png  and I wanted to change it with     template save png  onclick   UPDATED  here s my html onclick    lt a href     onclick  edit    gt  lt img src     template edit png  id  edit-save   gt  lt  a gt    and my JS  function edit            var inputs   document myform      for var i   0  i  lt  inputs length  i              inputs i  disabled   false            I ve tried inserting this inside the edit    it works but need to click the image twice  var edit save   document getElementById  edit-save        edit save onclick   function           this src       template save png

User · Answer

In this case  as you want to change the src of the first value of your element  you have no need to build up a function  You can change this right in the element    lt a href     onclick  this firstChild src     template save png     gt     lt img src     template edit png  id  edit-save   gt   lt  a gt    You have several ways to do this  You can also create a function to automatize the process   function changeSrc p  t       where p  Parent  t  ToSource      p firstChild src   t     Then  you can    lt a href     onclick  changeSrc this      template save png     gt     lt img src     template edit png  id  edit-save   gt   lt  a gt

User · Answer

You can use both jquery and javascript method  if you have two images for example    lt img class  image1  src  image1 jpg  alt  image  gt   lt img class  image2  src  image2 jpg  alt  image  gt    1 Jquery Method-       image2   attr  src   image1 jpg      2 Javascript Method-   var image   document getElementsByClassName  image2    image src    image1 jpg    For this type of issue jquery is the simple one to use

User · Answer

Give your image an id  Then you can do this in your javascript   document getElementById  blaah   src  blaah     You can use the        method to change the value of any attribute of any element

User · Answer

its ok now  function edit            var inputs   document myform      for var i   0  i  lt  inputs length  i              inputs i  disabled   false             var edit save   document getElementById  edit-save            edit save src       template save png

User · Answer

Maybe because you have a  tag like a parent of the  tag  That why you have to click two time the images    For me the solution is this  http   www w3schools com js tryit asp filename tryjs intro lightbulb

User · Answer

With the snippet you provided  and without making assumptions about the parents of the element  you could get a reference to the image with  document querySelector  img name  edit-save        and change the src with   document querySelector  img name  edit-save     src           so you could achieve the desired effect with   var img   document querySelector  img name  edit-save      img onclick   function         this src            this is the reference to the image itself      otherwise  as other suggested  if you re in control of the code  it s better to assign an id to the image a get a reference with getElementById  since it s the fastest method to retrieve an element

User · Answer

if you use the JQuery library use this instruction       imageID   attr  src    srcImage jpg

User · Answer

Give your img tag an id  then you can  document getElementById  imageid   src     template save png

User · Answer

lt img src     template edit png  name  edit-save  onclick  this src       template save png     gt

[javascript] Programmatically change the src of an img tag

Examples related to javascript

Examples related to html

Examples related to image

Examples related to src