How to change multiple images by clicking button to change src in Javascript

Question

I'm totally new to web dev and trying to learn and practice Javascript. I've learned a trick to change displayed image by changing the src of the image (they are named: pic-0.jpg, pic-1.jpg, pic-2.jpg... so on) but somehow my code won't work. Anyone can have a look at my codes, help me out and give me some advice. I'd appreciate it!

Here are the codes:

var counter = 0;

document.getElementById('btn-next').addEventListener('click', changeImg);

function changeImg() {
  counter++;
  document.getElementById('picture').src = 'pic-' + counter + '.jpg';
}

<body>
  <section class="container">
    <div class="picture-container">
      <img src="pic-0.jpg" id="picture" alt="">
    </div>
    <button id="btn-previous">Previous</button>
    <button id="btn-next">Next</button>
  </section>
  <script src="r.js"></script>

</body>

cheers and many thanks!

getElementById not Elements , see the below modified code

DEEPAK
– DEEPAK

2020-01-14 11:13:01 +00:00
Commented Jan 14, 2020 at 11:13 — DEEPAK
– DEEPAK, Commented Jan 14, 2020 at 11:13

DEEPAK · Accepted Answer · 2020-01-14 12:40:24Z

2

you are using getElementsById , you should use getElementById because id is always unique and one page can have only one id , you can use getElementsByClassName because class can be attached more than one tag

var counter = 0;

document.getElementById('btn-next').addEventListener('click', changeImg);

function changeImg() {
    counter++;
    document.getElementById('picture').src = 'pic-' + counter + '.jpg';
    document.getElementById('picture').alt = 'pic-' + counter + '.jpg';
}

<body>
    <section class="container">
        <div class="picture-container">
            <img src="pic-0.jpg" id="picture" alt="df">
        </div>
        <button id="btn-previous">Previous</button>
        <button id="btn-next">Next</button>
    </section>
    <script src="r.js"></script>

</body>

//---------------------JavaScript---------------

edited Jan 14, 2020 at 12:40

answered Jan 14, 2020 at 11:15

DEEPAK

1,57415 silver badges24 bronze badges

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

3 Comments

Lap Hoang Over a year ago

oh sorry for my mistyping! thanks for pointing that out. I already edited it but still didnt work.

DEEPAK Over a year ago

its working you can run my snippet and match with your codes , for better understanding m changing the alt attribute

Lap Hoang Over a year ago

yes it is! also with my codes! it's weird, man. I tried by switching the assignment of the Event to the PREVIOUS button and it worked. I went to the console to check again and saw NO EVENT assigned to the NEXT button. After a while, I closed the JS file window I was working on and reopened it. BOTH worked with the same codes! Thanks anyways!

Mariselvam · Accepted Answer · 2020-01-14 11:59:55Z

1

<body>
    <section class="container">
        <div class="picture-container">
            <img src="https://i.picsum.photos/id/1/5616/3744.jpg" id="picture" height=50 width=50 alt="df">
        </div>
        <button id="btn-previous">Previous</button>
        <button id="btn-next">Next</button>
    </section>
    <script>
    var counter = 1;
    document.getElementById('btn-next').addEventListener('click',       nextImg);
     document.getElementById('btn-previous').addEventListener('click',preImg);

function nextImg() {
    counter++;
    document.getElementById('picture').src = 'https://i.picsum.photos/id/' + counter + '/5616/3744.jpg';
}
function preImg() {
    counter--;
    document.getElementById('picture').src = 'https://i.picsum.photos/id/' + counter + '/5616/3744.jpg';
}
    </script>
</body>

answered Jan 14, 2020 at 11:59

Mariselvam

1594 bronze badges

1 Comment

Lap Hoang Over a year ago

this works beautifully, thanks buddy! my codes after a while worked too! thanks!

Darshana Pathum · Accepted Answer · 2020-01-14 12:08:30Z

1

I think the best thing is store all of your images path into an array. Then

var imgArr = ["1.jpg", "2.jpg"]
var counter = 0;

function changeImg(evt) {

  if(evt === 'prv'){
    if(counter === 1)
      counter++;
    else
      counter--;
  }
  else{
     if(counter === (imgArr.length))
        counter = 1;
     else
        counter++;
  }

  document.getElementById('picture').src = imgArr[counter]; 


}




<section class="container">
  <div class="picture-container">
    <img src="" id="picture" alt="">
  </div>
  <button id="btn-previous" onClick="changeImg('prv')">Previous</button>
  <button id="btn-next" onClick="changeImg('nxt')">Next</button>
</section>

answered Jan 14, 2020 at 12:08

Darshana Pathum

6695 silver badges12 bronze badges

1 Comment

Lap Hoang Over a year ago

I have also read some and this I figured is a better solution. But I just wanted to figure out "WHY THAT DOESNT WORK" because I'm learning and testing. Thanks!

Collectives™ on Stack Overflow

How to change multiple images by clicking button to change src in Javascript

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related