javascript banners freezes on first banner

Question

I have two banners which I added recently to my website and I'd like to change the banners every 5 seconds, unfortunately, it shows only the first one and freezes

this is my whole code for foreach data

var links = ["http://site", "http://site"];
var images = ["/uploads/ad1.png", "/uploads/ad2.png"];
var i = 0;
var renew = setInterval(function() {
  if (links.length == i) {
    i = 0;
  } else {
    document.getElementById("bannerImage").src = images[i];
    document.getElementById("bannerLink").href = links[i];
    i++;

  }
}, 500);

   

<?php  foreach ($messages as $message){

    ?>

                 

                    <a href="?id= <?php echo $message['message_id']?>" class="waves-effect waves-light"> details <i class="fas fa-angle-double-left ml-2"></i>

                </div>

                <br>

            </div>

        </div>
        <div class="container">
            <div class="text-center">

                <a id="bannerLink" href="http://site" onclick="void window.open(this.href); return false;">
                    <img id="bannerImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" width="320" height="120" alt="some text">
                </a>
            </div>
        </div>



    </div>

`div` elements do not have load events. `window` does. images do. iframes do. other media elements do most likely. `div`s do not. If you put a console.log inside the method you are trying to run on load, you will see it is not executing. — Taplar, Jan 17 '20 at 20:02
thanks @Taplar, I managed to get this workoing, but I have the html code inside php foreach and the banners are changing just in the first foreach data and not changing in the second ! — iPhone Store, Jan 17 '20 at 20:05
`php` runs on the server, not the client. so i'm not sure how any looping on the server side would affect the looping you are trying to implement on the client. — Taplar, Jan 17 '20 at 20:06
Unless you are saying that the php loop generates duplicate html elements, that only one works with. If that is the case, can you please update your question to show the duplicated markup, and also provide any changes you have made to the original code presented. — Taplar, Jan 17 '20 at 20:10
@Taplar I updated the code I used and it's working but only in the first row of foreach data — iPhone Store, Jan 17 '20 at 20:32
You're example oes not have multiple rows, as far as I can see. Please show an example with multiple rows. — Taplar, Jan 17 '20 at 20:35
https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page You're issue is you are repeating ids. Ids are expected to be unique per page. You should use a class instead, and adjust your logic to use contextual lookups. — Taplar, Jan 20 '20 at 15:40

score 1 · Answer 1 · answered Jan 17 '20 at 22:32

This code here will change the image and the link every 5 seconds.

var links = ["http://site","http://site"];
var images = ["https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500","https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"];

var i = 0;
var renew = setInterval(function(){    
    document.getElementById("bannerImage").src = images[i];
    document.getElementById("bannerLink").href = links[i];
    i++;
    
    if (i == links.length) {
      i = 0;
    }
}, 5000);

<div class="container">
    <div class="text-center">

        <a id="bannerLink" href="http://site" onclick="void window.open(this.href); return false;">
            <img id="bannerImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" width="320" height="120" alt="some text">
        </a>
    </div>
</div>

I rearranged the loop so it will always change an image every 5 seconds. Before you have the reset taking an entire round, adding 5 seconds.

I also changed 500 to 5000 (it's in milliseconds)

thanks, but it's the same it changes only on the first row of foreach data ! — iPhone Store, Jan 18 '20 at 07:52
What do you mean by "the first row of foreach data"? It should use all the data that it is given. Could you give an example or a way to replicate the issue? — Jack, Jan 18 '20 at 14:33

javascript banners freezes on first banner

1 Answers1