How to change custom marker image every few minutes (OpenLayers)?

I'm trying to create a map with custom markers on OpenLayers. The markers' images need to be changed every few minutes. I can only load the map and show the markers but have no idea how to change the images.

My code:

var coordinates = [
    [23.3219, 42.6977],
    [27.9147, 43.2141],
    [25.6172, 43.0757],
    [27.4626, 42.5048],
];
var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([25.4858, 42.7339]),
        zoom: 7
    }),

});

for (let i = 0; i < coordinates.length; i++) {
    var element = document.createElement('div');
    element.innerHTML = '<img id="pointer" src="../admin-front-end/assets/green_index.png" width="30" height="30" />';

    var markerCoordinates = ol.proj.fromLonLat([coordinates[i][0], coordinates[i][1]]);

    var marker = new ol.Overlay({
        position: markerCoordinates,
        positioning: 'bottom-left',
        element: element,
        stopEvent: false
    });

    map.addOverlay(marker); 
}

Solution

To change the images with your existing code, keep references to the markers, create new element <div>s with the new icon. Then call .setElement on each marker.

proof of concept fiddle

for (var i=0; i<markers.length; i++) {
  var element = document.createElement('div');
  element.innerHTML = '<img id="pointer" src="'+blueIcon+'" width="30" height="30" />';
  markers[i].setElement(element);
}

code snippet:

var greenIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAANbY1E9YMgAABF1JREFUWMOtl3ls1EUUx9+8mW7rbl1KK93utrDbbrstvXZ7LtCTRuMtxqaJB6I1GGPERLlUkIKSKFoOCZUQaESC0RBSpSoJTUP/EIlXPAuJJiIBvI1IPEKqyPPNbyMU9vezdOofn0x+x7z3nZn33swAEYEdMDwD4DDzfj2IVyoAN5YAPpovZYc/LkOeZQqxV4F4UQlug54V8ibfLFxRoMT6YhAvlQO8V5/oz3acfFh+LknAnijgwlCVyrlsQLnUGVnhJXmrn/DePMLb/CRjk0i5Uv7m70P4YDAu+iqtfv+PgMMzARdMu4tHOyKvyyYxWE3wTRPByRaCn1sSLT+LoRrCm32kAM/g/Lz7z/WfkICvGgC7wp1slHhqE85+aCY43khwbBT6Wb//pZXE5unEy0O4NPSA7m8u4OM4iB3ltTzyP/E5dv5ra7LjYzZC+D+xtZRnQpzltgk+iZsJEPuqQZZdPiCvn2KN7D8dX8ypVsKOHFJhzwGxN6aMBOBj+U1KShL7awi+bx6fgO+aSRysI5UiCR8KXm0kQJV7H5dlXjbWNPbU2/FjM8maDFIF6U+aCQDcJjmqrcAbr3MN98PbAzoreg0FwHacG+D1n4CA+6aStmMoQG6RN2Qnct1UQIdfz8BWIwFyxuTFMpxO8LVBDBxPBKKOIVXpXW6WBU8VVSuUI1yGrYAalwAuSmKgmguSPItdBY1mdeC1KMh4xssMwU8s4MQ4Rs/LJmdnkop6+8WrUcNKyBUM+mNhlSpP4pIQF5dLjAVdhFaGSSn8TeyuLDWuhHCI94KjDSA2Fl/JZfU0ri4cuyLyd+Q9g///C9cU3aj7azvmAv4V0R1pZ6MkdlY4ZwUvk3g9Rnw+ILEy3Gk5H57IbvhR/DxHZgF25q5SmS5igwTfNl3o/AQ/H20kGXKTvMXXYzn/jJ1/msAsCN+tP48+XHwQl6rQ845s9yXPgs75RSFSGa4jMFQzyToNHaw7h5mAgeoLeasWsDvSZi3F4KgNSh9OhmeScist4h7xdl1SXzMBuyuTeTOmt+i9cs6oCqlHv7yA1GTXF5y6qaI/ah3hRmMmYE+yIbGvCvCJwqtUqiL4MJ6IBc57GXQT3hlYZI2Y8/5izAS8UJbMdqtNUemuL3FthOD32STe4MhX8jS/D+oZshNuJmDLdHt2lIFsyNwk27IIRtoIH+bgm+o+IHZVgNhZbovZXrAuYs+mEpDz865VV6Qlpr82g+Q1U5aJ3lIQ/M0OMwHdEXvWFQOuCvuVx/WH6IuSyk4jvgs0Ws70pcQGMwGLQ84sCYHKSvuc7wukMlNPidWFWWJ9BMRae8wELAw580g+8PVsv6ziG1Ge+xA+WwT4DLPGHjMBcwPOdOYCH1Z28TKQLEgfxKX5wMHoiJmAOwLO3M0CSr2b9Y1JTvP0YXsO4ByfI2Zp+HSRMxuKgSO/iw+cJFuyesTzHICcIU6YCegpcYZTDuflztMC+Aa0QGxzTsGx0vAf+FD87tCsiD0AAAAASUVORK5CYII=";
var coordinates = [
  [23.3219, 42.6977],
  [27.9147, 43.2141],
  [25.6172, 43.0757],
  [27.4626, 42.5048],
];
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([25.4858, 42.7339]),
    zoom: 7
  }),

});
var markers = [];
for (let i = 0; i < coordinates.length; i++) {
  var element = document.createElement('div');
  element.innerHTML = '<img id="pointer" src="' + greenIcon + '" width="30" height="30" />';

  var markerCoordinates = ol.proj.fromLonLat([coordinates[i][0], coordinates[i][1]]);

  var marker = new ol.Overlay({
    position: markerCoordinates,
    positioning: 'bottom-left',
    element: element,
    stopEvent: false
  });
  markers.push(marker);
  map.addOverlay(marker);
}
var green = true;
setInterval(function() {
  for (var i = 0; i < markers.length; i++) {
    if (green) {
      var element = document.createElement('div');
      element.innerHTML = '<img id="pointer" src="' + blueIcon + '" width="30" height="30" />';
    } else {
      var element = document.createElement('div');
      element.innerHTML = '<img id="pointer" src="' + greenIcon + '" width="30" height="30" />';
    }
    markers[i].setElement(element);
  }
  green = !green;
}, 2500);

var blueIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAANbY1E9YMgAABNRJREFUWMO1lwtMm1UUgG8frEKBBdqZFcf7scmjpVAoZRRGH1BglLYIlFcdbxGWieAY6ICVjT19z20OJtM4jY+pmC26LKIZU9To1GQmksxkbibbfCwmRgkbcDy3xDJs6+BOm3z50/b/7/3+c889914CAMQdlq5fSHH3dWLsuESyN5wmacUvEZl+gBcutyn9RJHdHA5niBBylF79RBFbQxNK0+WGvfw0yzBZZ3ufGNt/cDxP2/HUB4XcTqCo4zLRNXxMEjS9cqF/0Ck+32taFCSHyORaWLO2DSIVdSBapQD8fUboLxmNy+pSauvOOMT/EwELEpe55X5826mQOAsYWr4Ba/8sVO0CJ+XbZyF/47cQJrVii2R6TfpDzc7n70SgtHeKJOU9XsPhEFBahqFqN0DFAIDVPgtl26bnsc84fqf/p5e+ClwuF6Ta/hb6PLOAqfMKyao+ocDOb6iKj0L1XsDOZhZ27MIM2PC+DOsbNBKzGdY31abOq2wCuc3nSIBEdioYw169ezGdz1O9BwCTFfzFMWM5TZ/zmQRkObvUXC4P8lq/hoodsOjOKeV4f2HbBPB4XhCfvTWXSSBQIn8sQCJ1NLaUt/97KGhOrAhR0ijYmQTwMxgmLXNk+dI6n4MmZJSiljY0xCowHJVS72iIVeBerBO0HSYBzP5DIfGWO4pAhLwaOIQcZhK4OyyzY7k4GovOjGOeLzUHaO4ESmQguif5USYBxfrnkrDOT+kbzkDlwNKiQBPQ0PIFcDjc2STDvgwmAV3DWYyC+hUEKne6qX6ewGjRYQuKMeDbK0Z0uC4wCZixgukbP4nkeQmuS7X2RRcjeh+WbyzH/N+1dR/Gmjuvsa4Fv5IyrOWq4hd1mMmTyQVP33ZG0P+VliM082+mGA8WlvbdcLTDLOCQwEaUpsFibBTW2U54nBV0mPSNYzjuHBqBmtK+uYWIfTHafMVJSe8kiUlr7RMIxWDpuorL70IJK9a6sr4/wS8wEsJlVfuptLnrZ2Le8pMDJoHChy86MbZfIkWP/MjzF68eD0+sdIkC/R6v6QGBd8D3+RvPLy9sv0jWt11wwiRgePCrBRRsmiCppkENHYq8lnPOBcraDxiVa8Bf5gMJmr5a2mEu3n8rTAKa2lEX9E2f4hKdeDI0YX6NoNfEnJ0g8Amc0NWfFegbxx1buFthrgP/JLf5S5Kc/5SexxdA0ebLc7lgnwbfwHCISmlqp5HS1Y+5wCSQWTHiSuW7eH3Ha5nA70Kq6TDY9mHmN43jus+fVFeOhOqbPnN5e+YIrC173S1ZVSfJygjNs7TSbXgS6IYDfAPCxjQ1o7gdf88tTAJK8wtuUd13jKxWbcrz9l2BOXATNx0qWBVr6lZXvE3SS465hUkAM94tSvMRkpT/hMRLIPxDW/cR+PithLis7oz0kpcJPZS4g0kgQbvNA3Yi1fUTb6H4u9jMTrhLKPpNUfCMKI1GyDTkFjYBTa9HZPodxF8U8YE4OBXHP+R8atHzJMV4CDnoFiaBqJRGj2BZJv7i6NeWCYS46Yw+LdVtJ/HZPR75XwTwzHCAVkW/wPDjuPUieCzzCJNAivGAR2hiBccW9VABSZR+Px7HPM4aCpOApylFUZe/RaJTH7BRATwBtWZUHCcqnAWe+DeBvwCBxinM8zq2PAAAAABJRU5ErkJggg==";

html,
body {
  height: 100%;
  width: 100%;
}

.map {
  height: 80%;
  width: 100%;
}

<h2>My Map</h2>
<div id="map" class="map"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>