How i can change img source ? souppose i have 10 images to change on same source

Question

I want to make a button that simply change photo src from given src of image

<div id="main_photo">
<img class="card-img-top" src="/img/new0.JPG" alt="Avatar" >
</div>

I have new1.JPG to new6.JPG photo which should be changed on this image source on click of a button All photos are in my /img/ folder And here is my HTML code for the button to change src with onclick.

<button id="changeimg" > Change </button>

Use consistent naming, i.e. the names of the images should be new0.JPG to new6.JPG, then you can use a simple variable as a counter and build a name as a string using the counter. If the original image shouldn't be shown again, then new.JPG is fine. — Teemu, Sep 26 '21 at 09:45
No, I am making this in spring so there is img folder in the project. All images are there in one folder. — LEGENDRYzZzZ, Sep 26 '21 at 09:52
@Tartarus can you solve this problem with list? if can please solve this via list method — LEGENDRYzZzZ, Sep 26 '21 at 10:13
@LEGENDRYzZzZ I add an answer to show a demo for you. Hope it helps you. — Tuan Dao, Sep 26 '21 at 10:25
@Tartarus if I have a down button also which has to open URL /Balance_sub with the same 15 seconds, then how I should format the code. I tried putting this function below Up(isnew) with name down(isnew),but it was again calling up(isnew) if we reload while down is already clicked. Can you please help me with this problem? [my_previous_que](https://stackoverflow.com/questions/69288190/how-do-i-prevent-already-started-onclick-function-in-javascript-even-after-i-r) — LEGENDRYzZzZ, Sep 26 '21 at 12:44
@LEGENDRYzZzZ I updated another version in your old question. Hope it helps you. — Tuan Dao, Sep 26 '21 at 13:37
@Tartarus Hey Tartarus can please do lill help kindly change when button for up and down is clicked it perform /Balance_add and /Balance_sub first then blocks button for 15sec and for 15sec both button will be blocked [my previous que](https://stackoverflow.com/questions/69288190/how-do-i-prevent-already-started-onclick-function-in-javascript-even-after-i-r) — LEGENDRYzZzZ, Sep 27 '21 at 14:57
@LEGENDRYzZzZ when you excute /Balance_add, it is redirected to another page, so you cannot "then blocks button for 15sec...". You have to do it first. — Tuan Dao, Sep 27 '21 at 15:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237557/discussion-between-legendryzzzz-and-tartarus). — LEGENDRYzZzZ, Sep 27 '21 at 15:31
@LEGENDRYzZzZ maybe you should try to read and customize my code for your purpose firstly. And if it doesn't work after you tried, I will help you later. — Tuan Dao, Sep 27 '21 at 15:41
@Tartarus I have tried it first but not get any solution. Hope you understand. — LEGENDRYzZzZ, Sep 27 '21 at 15:46
@LEGENDRYzZzZ So if I change the steps: Click the `up` button -> block `up` button 15s -> redirect to `/balance_add` instantly -> after 15s on `up` button, we disable both of 2 buttons in next 15s. Is that matched your requirements? — Tuan Dao, Sep 27 '21 at 15:54
@Tartarus my requirement is - on click of up button, the `/balance_add` should be called first --> instantly after this disable both buttons for 15 seconds. And similar for the down button with link `/balance_sub`. — LEGENDRYzZzZ, Sep 27 '21 at 16:07
@LEGENDRYzZzZ https://codepen.io/tuandaodev/pen/powQgYj You can check it here. — Tuan Dao, Sep 27 '21 at 16:19
@Tartarus You are great sir Thanks a lot its working excellent. Let's stay connected sir. — LEGENDRYzZzZ, Sep 27 '21 at 16:25

score 2 · Answer 1 · answered Sep 26 '21 at 10:17

As @Teemu said (in comments), if you have the list of the new images you want to change to, you can do it by js code.

<div id="main_photo">
<img class="card-img-top" id="mainImage" src="/img/new0.JPG" alt="Avatar" >
</div>
<button id="changeimg" onclick="changeImage()"> Change </button>

<script>
var imageIndex = 0;
var imageCount = 6; // Can be also an array of images names ["/img/new0.JPG", "/img/new1.JPG", ..., "/img/new6.JPG"]

function changeImage() {
 var imageContainer = window.getElementById("mainImage");
 imageContainer.src = "/img/new" + (imageIndex++) + ".JPG";
 // Make sure you validate the counter so it won't overflow
}
</script>

score 2 · Answer 2 · answered Sep 26 '21 at 10:24

I have a demo for you if you have the list of images. And I believe that you can have that by simple code to get all images in your local folder.

const listSources = [
  '/img/new0.JPG',
  '/img/new1.JPG',
  '/img/new2.JPG',
  '/img/new3.JPG',
  '/img/new4.JPG',
  '/img/new5.JPG',
  '/img/new6.JPG',
]

var currentIndex = 0;
$('#changeimg').click(function() {
    // increase index to show the next image
    currentIndex++;
    // reset if reach the last image
    if (currentIndex == listSources.length) currentIndex = 0;
    // set image src
    $('#main_photo>img').first()
      .attr('src', listSources[currentIndex])
      .attr('alt', listSources[currentIndex]); // change alt to show changes in demo
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="changeimg">Change</button>
<div id="main_photo">
  <img class="card-img-top" src="/img/new0.JPG" alt="/img/new0.JPG">
</div>

How i can change img source ? souppose i have 10 images to change on same source

2 Answers2