Вставьте многократный обратный отсчет во всплывающее окно листовки с маркером

Question

Моя цель - показать на каждом всплывающем маркере обратный отсчет, основанный на Json (obj.time). Отсчет должен быть показан на <div id='demo'> Если я вставлю один отсчет для всех, <div id='demo'> работает, но не с несколькими значениями.

Я попытался объединить obj [i] .id с id = 'demo', чтобы иметь несколько идентификаторов для каждого обратного отсчета, как это <div id='demo"+obj[i].id+"'> Затем я сделал то же самое с document.getElementById("demo"+obj[i].id).innerHTML = hours + "h "+ minutes + "m " + seconds + "s ";

Ошибка, которую я получаю: Uncaught TypeError: Cannot read property 'id' of undefined at (index):215

Вот мой проект https://jsfiddle.net/tiziako/wpo32g6a/

Answer 1

Вы должны поместить новый l oop в функцию интервала:

var x = setInterval(function() {
  for(var i = 0; i < obj.length; i++){
     if(document.getElementById("demo"+obj[i].id)){
        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = new Date(obj[i].time).getTime() - now;

        // If the count down is finished, write some text and continue loop
        if (distance < 0) {
            document.getElementById("demo"+obj[i].id).innerHTML = "EXPIRED";
            continue;
        }
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="demo"
        document.getElementById("demo"+obj[i].id).innerHTML = hours + "h "+ minutes + "m " + seconds + "s ";

      }
    }
}, 200);

Также вы можете установить интервал быстрее, тогда он будет показывать таймер быстрее, если вы откроете всплывающее окно.

https://jsfiddle.net/falkedesign/7fkpvzta/