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>

Answer 1

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++
}