Change image source with JavaScript

Question

So I m new with JavaScript  this is actually my first attempt to make something work  and I m having a bit of trouble  I thought I had enough knowledge to make this work  I ve even googled for tutorials and scripts that could help me work this out but nothing really helped  I can t seem to change the image source  heres the code that I have so far      function changeImage a            document getElementById  quot img quot   src a src              lt div id  quot main img quot  gt           lt img id  quot img quot  src  quot 1772031 29 b jpg quot  gt       lt  div gt       lt div id  quot thumb img quot  gt           lt img src  1772031 29 t jpg   onclick  changeImage  quot 1772031 29 b jpg quot     gt           lt img src  1772031 55 t jpg   onclick  changeImage  quot 1772031 55 b jpg quot     gt           lt img src  1772031 53 t jpg   onclick  changeImage  quot 1772031 53 b jpg quot     gt       lt  div gt   Could anyone please explain if I m doing something wrong  Or maybe I m missing something  Help me please  -

User · Answer

I know this question is old  but for the one s what are new  here is what you can do  HTML  lt img id  quot demo quot  src  quot myImage png quot  gt    lt button onclick  quot myFunction   quot  gt Click Me  lt  button gt   JAVASCRIPT function myFunction     document getElementById  demo   src    quot myImage png quot

User · Answer

The Following Example Program used to change the image src attribute for every 100 milliseconds  you may call the given function as your wish    lt html gt   lt head gt   lt  head gt   lt body gt   lt img src  bulboff jpg  height 200 width 200 id  imm  align  right  gt    lt script type  text javascript  gt   function bulb      var b   document getElementById  imm     if b src match  bulboff jpg       b src    bulbon jpg      else     b src  bulboff jpg        setInterval bulb 100    lt  script gt   lt  body gt   lt  html gt

User · Answer

lt script type  text javascript  gt          function changeImage a        var picName a substring 1 a length-1               document getElementById  image   src picName              lt  script gt     lt div id  main img  gt        lt img id  image  src  app jpg  gt    lt  div gt     lt div id  thumb img  gt        lt img src  app jpg   onclick  changeImage   5steps jpg      gt        lt img src  5steps jpg   onclick  changeImage   award png      gt        lt img src  award png   onclick  changeImage   app jpg      gt    lt  div gt    Use the above code by placing this html file and pics take care in namings  beacause I have given the above code with my pic names  in same folder you will get

User · Answer

Try this   function changeimage         var image   document getElementById  imagem        if  image src match  img              for i   1  i  lt   3  i                  image src    img image2  i   png                   else           image src    img image1 png

User · Answer

If you will always have the pattern on  b instead of  t you can make it more generic by passing reference to the image itself   onclick  changeImage this      Then in the function   function changeImage img        document getElementById  img   src   img src replace   t     b

User · Answer

Your only real problem is you are passing a string  not an object with a  src property  Some suggestions    Use a naturally clickable element trigger  such as  lt button gt  Use data- prefixed attributes for event data on the element Use late bound events when the DOM is ready    Markup    lt div id  main img  gt     lt img id  img  src  1772031 29 b jpg  gt   lt  div gt   lt ul id  thumb img  gt     lt li gt  lt button data-src  1772031 29 b jpg  gt  lt img src  1772031 29 t jpg    gt  lt  button gt  lt  li gt     lt li gt  lt button data-src  1772031 55 b jpg  gt  lt img src  1772031 55 t jpg    gt  lt  button gt  lt  li gt     lt li gt  lt button data-src  1772031 53 b jpg  gt  lt img src  1772031 53 t jpg    gt  lt  button gt  lt  li gt   lt  ul gt    JavaScript   If you need to support IE and other legacy browsers  Use a proper polyfill for Array from  function clickedButton btn  event      document getElementById  img   src   btn getAttribute  data-src       function bindClick btn      btn addEventListener  click   clickedButton bind null btn          Setup click handler s  when content is loaded document addEventListener  DOMContentLoaded   function      Array from document querySelectorAll   thumb img  gt  button         forEach bindClick            Edit  Vanilla JS for modern browsers

User · Answer

Under the TODOs  i am trying to implement your code in this posting  I am trying to take the large div on the left and make it change to reflect selections on the right  there are two selections  Ambient Temperature and Body Temperature   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt title gt  Temperature Selection  lt  title gt  x000D   lt  -- css -- gt  x000D    lt link rel  stylesheet  href  bootstrap-3 css bootstrap min css  gt  x000D    lt link rel  stylesheet  href  css main css  gt  x000D   x000D   lt  -- end css -- gt  x000D   lt  -- Java script files -- gt  x000D   lt  -- Date js date os javascript helper -- gt  x000D       lt script src  js date js  gt   lt  script gt  x000D   x000D   lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt  x000D    lt script src  js jquery-2 1 1 min js  gt  lt  script gt  x000D   x000D   lt  -- Include all compiled plugins  below   or include individual files as needed -- gt  x000D    lt script src  bootstrap-3 js bootstrap min js  gt   lt  script gt  x000D    lt script src  js library js  gt   lt  script gt  x000D    lt script src  js sfds js  gt   lt  script gt  x000D   x000D    lt script src  js main js  gt   lt  script gt  x000D   x000D   lt  -- End Java script files -- gt  x000D   x000D   lt  --TODO  need to integrate this code into the project -- gt  x000D   lt script type  text javascript  gt  x000D      function changeImage a    x000D          document getElementById  img   src a  x000D        x000D   lt  script gt  x000D    lt script gt  x000D    x000D    x000D     document  ready function     x000D    x000D        ambient   click function event   x000D     var  this    this   x000D     if  this hasClass  clicked     x000D       this removeClass  clicked    x000D      SFDS setTemperatureType 0   x000D       this find  h2   text  Select Ambient Temperature 21 Degrees C    x000D       lt  --added on 05 20 2015-- gt  x000D      else  x000D      SFDS setTemperatureType 1   x000D       this addClass  clicked    x000D       this find  h2   text  Ambient Temperature 21 Degrees C Selected    x000D   x000D   x000D       x000D        x000D     x000D        body   click function event   x000D     var  this    this   x000D     if  this hasClass  clicked     x000D       this removeClass  clicked    x000D      SFDS setTemperatureType 0   x000D       this find  h2   text  Select Body Temperature 37 Degrees C    x000D       lt  --added on 05 20 2015-- gt  x000D      else  x000D      SFDS setTemperatureType 1   x000D       this addClass  clicked    x000D       this find  h2   text  Body Temperature 37 Degrees C Selected    x000D   x000D   x000D       x000D        x000D     x000D     x000D     x000D       x000D   lt  script gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D   lt div class  container-fluid  gt  x000D    lt header gt  x000D     lt div class  row  gt  x000D      lt div class  col-xs-6  gt  x000D       lt div id  date  gt  lt span class  date time  gt  lt  span gt  lt  div gt  x000D      lt  div gt  x000D      lt div class  col-xs-6  gt  x000D       lt div id  time  class  text-right  gt  lt span class  date time  gt  lt  span gt  lt  div gt  x000D      lt  div gt  x000D     lt  div gt  x000D    lt  header gt  x000D    lt div class  row  gt  x000D     lt div class  col-md-offset-1 col-sm-3 col-xs-8 col-xs-offset-2 col-sm-offset-0  gt  x000D      lt div id  temperature  class  main button center-block  gt  x000D       lt div class  large circle button  gt   x000D        lt h2 gt Select lt br  gt Temperature lt  h2 gt  x000D        lt img class  center-block large button image  src  images thermometer png  alt    gt   x000D                       lt  -- TODO  lt img src  images dropsterilewater png   onclick  changeImage  images dropsterilewater png     gt  x000D                                   lt img src  images imagecansterilesaline png   onclick  changeImage  images imagecansterilesaline png     gt -- gt  x000D       lt  div gt  x000D       lt h1 gt  lt  h1 gt  x000D      lt  div gt  x000D     lt  div gt  x000D     lt div class   col-md-6 col-sm-offset-1 col-sm-8 col-xs-12  gt  x000D      lt div class  row  gt  x000D       lt div class  col-xs-12  gt  x000D        lt div id  ambient  class  large rectangle button  gt  x000D         lt div class  label wrapper  gt  x000D          lt h2 gt Ambient lt br  gt Temperature lt br  gt 21 lt sup gt o lt  sup gt C lt  h2 gt  x000D         lt  div gt  x000D         lt div class  image wrapper  gt  x000D          lt img src  images house png  alt    class  ambient temp image  gt  x000D         lt  div gt  x000D         lt img src  images checkmark png  class  button checkmark  width  96  height  88  gt  x000D   x000D        lt  div gt  x000D       lt  div gt  x000D       lt div class  col-xs-12  gt  x000D        lt div id  body  class  large rectangle button  gt  x000D         lt div class  label wrapper  gt  x000D          lt h2 gt Body lt br  gt Temperature lt br  gt 37 lt sup gt o lt  sup gt C lt  h2 gt  x000D         lt  div gt  x000D         lt div class  image wrapper  gt  x000D          lt img src  images bodytempman png  alt    class  body temp image  gt  x000D         lt  div gt  x000D         lt img src  images checkmark png  class  button checkmark  width  96  height  88  gt  x000D   x000D        lt  div gt  x000D       lt  div gt  x000D      lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D   x000D       x000D   lt  div gt  x000D   lt footer class  footer navbar-fixed-bottom  gt  x000D    lt div class  container-fluid  gt  x000D     lt div class  row cols-bottom  gt  x000D      lt div class  col-sm-3  gt  x000D       lt a href  main html  gt  x000D       lt div class  small circle button  gt       x000D        lt img src  images buttonback png  alt  back to home  class  settings   gt   lt  --  width  49  height  48  -- gt  x000D       lt  div gt  x000D      lt  div gt  lt  a gt  lt div class   col-sm-6  gt  x000D       lt div id  stop button   gt  x000D        lt img src  images stop png  alt  stop  class  center-block stop button    gt   lt  -- width  140  height  128  -- gt  x000D       lt  div gt  x000D        x000D      lt  div gt  lt div class  col-sm-3  gt  x000D       lt div id  parker  class  pull-right  gt  x000D        lt img src  images    alt  logo    gt   lt  -- width  131  height  65  -- gt  x000D       lt  div gt  x000D      lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D   lt  footer gt  x000D   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You ve got a few changes  this assumes you indeed still want to change the image with an ID of IMG  if not use Shadow Wizard s solution    Remove a src and replace with a    lt script type  text javascript  gt  function changeImage a        document getElementById  img   src a     lt  script gt    Change your onclick attributes to include a string of the new image source instead of a literal   onclick  changeImage   1772031 29 b jpg

User · Answer

The problem was that you were using  src without needing it and you also needed to differentiate which img  you wanted to change   function changeImage a  imgid        document getElementById imgid  src a       lt div id  main img  gt       lt img id  img  src  1772031 29 b jpg  gt   lt  div gt   lt div id  thumb img  gt       lt img id  1  src  1772031 29 t jpg   onclick  changeImage  1772031 29 b jpg    1     gt       lt img id  2  src  1772031 55 t jpg   onclick  changeImage  1772031 55 b jpg    2     gt       lt img id  3  src  1772031 53 t jpg   onclick  changeImage  1772031 53 b jpg    3     gt   lt  div gt

User · Answer

Instead of writing this     lt script type  text javascript  gt  function changeImage a        document getElementById  img   src a src     lt  script gt    try    lt script type  text javascript  gt  function changeImage a    document getElementById  img   src a     lt  script gt

User · Answer

Hi i tried to integrate with your code    Can you have a look at this   Thanks M S   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   x000D   lt  --TODO  need to integrate this code into the project to change images added 05 21 2016 -- gt  x000D   x000D   lt script type  text javascript  gt  x000D      function changeImage a    x000D          document getElementById  img   src a  x000D        x000D   lt  script gt  x000D   x000D   x000D    x000D   lt title gt  Fluid Selection  lt  title gt  x000D   lt  -- css -- gt  x000D    lt link rel  stylesheet  href  bootstrap-3 css bootstrap min css  gt  x000D    lt link rel  stylesheet  href  css main css  gt  x000D   lt  -- end css -- gt  x000D   lt  -- Java script files -- gt  x000D   lt  -- Date js date os javascript helper -- gt  x000D       lt script src  js date js  gt   lt  script gt  x000D   x000D   lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt  x000D    lt script src  js jquery-2 1 1 min js  gt  lt  script gt  x000D   x000D   lt  -- Include all compiled plugins  below   or include individual files as needed -- gt  x000D    lt script src  bootstrap-3 js bootstrap min js  gt   lt  script gt  x000D    lt script src  js library js  gt   lt  script gt  x000D    lt script src  js sfds js  gt   lt  script gt  x000D    lt script src  js main js  gt   lt  script gt  x000D   x000D   lt  -- End Java script files -- gt  x000D   x000D   lt  --added on 05 28 2016-- gt  x000D   x000D   lt style gt  x000D     The Modal  background     x000D   modal   x000D      display  none     Hidden by default    x000D      position  fixed     Stay in place    x000D      z-index 40001     High z-index to ensure it appears above all content     x000D      padding-top  100px     Location of the box    x000D      left  0  x000D      top  0  x000D      width  100      Full width    x000D      height  100      Full height    x000D      overflow  auto     Enable scroll if needed    x000D      x000D      background-color  rgba 0 0 0 0 9      Black w  opacity    x000D    x000D   x000D     Modal Content    x000D   modal-content   x000D      position  relative  x000D      background-color   fefefe  x000D      margin  auto  x000D      padding  0  x000D      border  1px solid  888  x000D      width  40   x000D      box-shadow  0 4px 8px 0 rgba 0 0 0 0 2  0 6px 20px 0 rgba 0 0 0 0 19   x000D      -webkit-animation-name  animatetop  x000D      -webkit-animation-duration  0 4s  x000D      animation-name  animatetop  x000D      animation-duration  0 4s x000D   opacity  5     Sets opacity so it s partly transparent    -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 50     x000D      IE      x000D   transparency    filter alpha opacity 50      More IE transparency    z-index 40001     x000D    x000D   x000D     Add Animation    x000D   -webkit-keyframes animatetop   x000D      from  top -300px  opacity 0   x000D      to  top 0  opacity 1  x000D    x000D   x000D   keyframes animatetop   x000D      from  top -300px  opacity 0  x000D      to  top 0  opacity 1  x000D    x000D   x000D     The Close Button    x000D   close   x000D       x000D    x000D   x000D   close hover  x000D   close focus   x000D      color   000  x000D      text-decoration  none  x000D      cursor pointer  x000D    x000D   x000D     The Close Button    x000D   close2   x000D       x000D    x000D   x000D   x000D   close2 focus   x000D      color   000  x000D      text-decoration  none  x000D      cursor pointer  x000D    x000D   x000D   modal-header   x000D   color   000  x000D      padding  2px 16px  x000D     x000D   x000D   modal-body  padding  2px 16px   x000D    x000D    x000D    x000D   x000D   modal-footer   x000D      padding  2px 16px  x000D      background-color   000099  x000D      color  white  x000D    x000D   x000D   x000D   lt  style gt  x000D   x000D   lt script gt  x000D     document  ready function     x000D    x000D    x000D        water   click function event   x000D     var  this    this   x000D     if  this hasClass  clicked     x000D       this removeClass  clicked    x000D      SFDS setFluidType 0   x000D       this find  h3   text  Select the H20 Fluid Type    x000D       else  x000D       SFDS setFluidType 1   x000D        this addClass  clicked    x000D        this find  h3   text  H20 Selected    x000D   x000D       x000D        x000D     x000D        saline   click function event   x000D     var  this    this   x000D     if  this hasClass  clicked     x000D       this removeClass  clicked    x000D      SFDS setFluidType 0   x000D       this find  h3   text  Select the NaCL Fluid Type    x000D       else  x000D       SFDS setFluidType 1   x000D        this addClass  clicked    x000D        this find  h3   text  NaCL Selected    x000D        x000D     x000D     x000D       x000D        x000D     x000D       x000D   lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div class  container-fluid  gt  x000D    lt header gt  x000D     lt div class  row  gt  x000D      lt div class  col-xs-6  gt  x000D       lt div id  date  gt  lt span class  date time  gt  lt  span gt  lt  div gt  x000D      lt  div gt  x000D      lt div class  col-xs-6  gt  x000D       lt div id  time  class  text-right  gt  lt span class  date time  gt  lt  span gt  lt  div gt  x000D      lt  div gt  x000D     lt  div gt  x000D    lt  header gt  x000D   x000D    lt div class  row  gt  x000D     lt div class  col-md-offset-1 col-sm-3 col-xs-8 col-xs-offset-2 col-sm-offset-0  gt  x000D      lt div id  fluid  class  main button center-block  gt  x000D       lt div class  large circle button  main img  gt   x000D        lt h2 gt Select lt br gt Fluid lt  h2 gt  x000D        lt img class  center-block large button image  src  images dropwater png  alt     gt   x000D       lt  div gt  x000D       lt h1 gt  lt  h1 gt  x000D      lt  div gt  x000D     lt  div gt  x000D     lt div class   col-md-6 col-sm-offset-1 col-sm-8 col-xs-12  gt  x000D      lt div class  row  gt  x000D       lt div class  col-xs-12  gt  x000D        lt div id  water  class  large rectangle button  gt  x000D         lt div class  label wrapper  gt  x000D          lt h3 gt Sterile lt br gt Water lt  h3 gt  x000D         lt  div gt  x000D         lt div id  thumb img  class  image wrapper  gt  x000D          lt img src  images dropsterilewater png  alt  Sterile Water  class  sterile water image  onclick  changeImage  images dropsterilewater png     gt  x000D         lt  div gt  x000D         lt img src  images checkmark png  class  button checkmark  width  96  height  88  gt  x000D        lt  div gt  x000D       lt  div gt  x000D       lt div class  col-xs-12  gt  x000D        lt div id  saline  class  large rectangle button  gt  x000D         lt div class  label wrapper  gt  x000D          lt h3 gt Sterile lt br gt 0 9  NaCL lt  h3 gt  x000D         lt  div gt  x000D         lt div class  image wrapper  gt  x000D          lt img src  images cansterilesaline png  alt   Sterile Saline  class  sterile salt image  onclick  changeImage  images imagecansterilesaline png     gt  x000D         lt  div gt  x000D         lt img src  images checkmark png  class  button checkmark  width  96  height  88  gt  x000D   x000D        lt  div gt  x000D       lt  div gt  x000D       lt div class  col-xs-12  gt  x000D        lt div class  small rectangle button  gt  x000D         x000D         lt  -- Trigger Open The Modal -- gt  x000D         lt div id  myBtn  class  label wrapper  gt  x000D          lt h3 gt Change lt br gt Cartridge lt  h3 gt  x000D         lt  div gt  x000D         lt div class  image wrapper  gt  x000D          lt img src  images changecartridge png  alt    class  change cartrige image    gt  x000D         lt  div gt  x000D        lt  div gt  x000D       lt  div gt  x000D       x000D        lt  -- The Modal -- gt  x000D        lt div id  myModal  class  modal  gt  x000D   x000D          lt  -- Modal content -- gt  x000D          lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt span class  close  gt  lt img src  images x-icon png  gt  lt  span gt  x000D           lt h2 gt Change Cartridge Instructions lt  h2 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt h4 gt Lorem ipsum dolor sit amet  dicant nonumes volutpat cu eum  in nulla molestie vim  nec probo option iracundia ut  Tale inermis scripserit ne cum  his no errem minimum commune  usu accumsan omnesque in  Eu has nihil dolor debitis  ad nobis impedit per  Dicat mnesarchum quo at  debet abhorreant consectetuer sea te  postea adversarium et eos  At alii dicit his  liber tantas suscipit sea in  id pri erat probatus  Vel nostro periculis dissentiet te  ut ubique noster vix  Id honestatis disputationi vel  ne vix assum constituam  lt  h4 gt                                                     x000D                              lt a href     gt  lt img src  images video-icon png  alt  click here for video  gt   lt  a gt  x000D                              lt a href   close2  title  Close  class  close2  gt  lt img src  images cancel-icon png  alt  Cancel  gt  lt  a gt  x000D   x000D                             x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt h4 gt  lt  h4 gt  x000D         lt  div gt  x000D          lt  div gt  x000D   x000D        lt  div gt  x000D        x000D        lt  --for comparison-- gt  x000D   x000D   x000D        x000D   x000D        x000D        lt script gt  x000D          Get the modal x000D       var modal   document getElementById  myModal    x000D   x000D          Get the button that opens the modal x000D       var btn   document getElementById  myBtn    x000D   x000D          Get the  lt span gt  element that closes the modal x000D       var span   document getElementsByClassName  close   0   x000D        x000D   x000D          When the user clicks the button  open the modal  x000D       btn onclick   function     x000D        modal style display    block   x000D         x000D   x000D          When the user clicks on  lt span gt   x   close the modal x000D       span onclick   function     x000D        modal style display    none   x000D         x000D   x000D          When the user clicks anywhere outside of the modal  close it x000D       window onclick   function event    x000D        if  event target    modal    x000D         modal style display    none   x000D          x000D         x000D         x000D         x000D        lt  script gt  x000D                       x000D   x000D       x000D       x000D       x000D       x000D       x000D      lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D   lt  div gt  x000D   lt footer class  footer navbar-fixed-bottom  gt  x000D    lt div class  container-fluid  gt  x000D     lt div class  row cols-bottom  gt  x000D      lt div class  col-sm-3  gt  x000D       lt a href  main html  gt  x000D       lt div class  small circle button  gt       x000D        lt img src  images buttonback png  alt  back to home  class  settings   gt   lt  --  width  49  height  48  -- gt  x000D       lt  div gt  x000D      lt  div gt  lt  a gt  lt div class   col-sm-6  gt  x000D       lt div id  stop button   gt  x000D        lt img src  images stop png  alt  stop  class  center-block stop button    gt   lt  -- width  140  height  128  -- gt  x000D       lt  div gt  x000D        x000D      lt  div gt  lt div class  col-sm-3  gt  x000D       lt div id  parker  class  pull-right  gt  x000D        lt img src  images parkerlogo png  alt  parkerlogo    gt   lt  -- width  131  height  65  -- gt  x000D       lt  div gt  x000D      lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D   lt  footer gt  x000D   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

function changeImage a  so there is no such thing as a src    just use a   demo here

User · Answer

I also tube that problem  But solve it by an instance of an image every time you change the source  image    It seems that would be called onload only once  But this way  you can change image whenever you want   function chageIcon domImg srcImage                var img   new Image            img onload   function                            Load completed             domImg src   this src                     img src   srcImage          Mode use   chageIcon document getElementById  img    newIcon png

[javascript] Change image source with JavaScript

Examples related to javascript

Examples related to image

Examples related to onclick

Examples related to src