CODEWITHSUNDEEP
javascripthtml
Mohammad Asadi
Mohammad Asadi

Reputation: 23

changing img src in javascript by click on button

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>

Upvotes: 2

Views: 287

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28434

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

Upvotes: 2

Related Questions