changing img src in javascript by click on button

Question

this is my code: I want to change the img src by clicking on the button and add one to the counter that change the next photo again But only the first photo is displayed ! and I have 8 img in this path : images/slides/writing${0-7};

slider = () =>{
    let i=0;
      let slides = document.getElementById('slides').getElementsByTagName('img')[0];
    slides.src = `images/slides/writing${i}.jpg` ; 
    i++
    
   
}

  
<section id="slides">
        <picture>
          <img src="" alt="Slide img">
          <input type="button" value="change" onclick="slider()">
      </picture>
 </section>

You reset i = 0 every time slider() is called (and it's a new variable every time because you declare it locally with let). Move this line outside of the function: let i=0; — blex
– blex, Commented Jul 4, 2020 at 20:31

Majed Badawi · Accepted Answer · 2020-07-04 20:32:22Z

2

You are always setting i to 0 inside the function, just make it global and make sure it doesn't exceed 7:

let i=0;
slider = () =>{
    if(i==8) i=0;
    let slides = document.getElementById('slides').getElementsByTagName('img')[0];
    slides.src = `images/slides/writing${i}.jpg` ; 
    i++
}

answered Jul 4, 2020 at 20:32

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

changing img src in javascript by click on button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related