3 счетчика Javascript на одной странице

Marcus Heed Langnes спросил: 12 мая 2018 в 03:43 в: javascript

Привет. У меня проблема.

Я только что получил Экзамен по созданию веб-страницы для своих медиа-классов. Это кампания по отношению к норвежскому правительственному отделу под названием "Helsedirektoratet".

Так что проблема заключается в том, что он не покажет мне все три счетчика одновременно. Поэтому, если кто-нибудь сможет мне помочь, это будет здорово!

(Первый раз с использованием Javascript)

<div id="seconds-counter"> </div>
<script>
  var seconds = 0;
  var el = document.getElementById('seconds-counter');

  function incrementSeconds() {
    seconds += 1;
    el.innerText = "Du har vært sukkerfri " + seconds + " sekunder.";
  }

  var cancel = setInterval(incrementSeconds, 1000);
</script>
<div id="seconds-counter"> </div>
<script>
  var seconds = 3;
  var el = document.getElementById('seconds-counter');

  function incrementSeconds() {
    seconds += 2;
    el.innerText = "Du har også spart " + seconds + " kroner.";
  }
  var cancel = setInterval(incrementSeconds, 1000);
</script>
<div id="seconds-counter"> </div>
<script>
  var seconds = 1;
  var el = document.getElementById('seconds-counter');

  function incrementSeconds() {
    seconds += 0.5;
    el.innerText = "Du har også spart " + seconds + " kalorier.";
  }
  var cancel = setInterval(incrementSeconds, 1000);
</script>

2 ответа

Dionisio Ramirez Flores ответил: 12 мая 2018 в 03:52

Вам нужно изменить идентификаторы div, например:

<div id="seconds-counter"> </div>
<script>
  var seconds = 0;
  var el = document.getElementById('seconds-counter');  function incrementSeconds() {
    seconds += 1;
    el.innerText = "Du har vært sukkerfri " + seconds + " sekunder.";
  }  var cancel = setInterval(incrementSeconds, 1000);
</script>
<div id="seconds-counter-kroner"> </div>
<script>
  var seconds = 3;
  var el = document.getElementById('seconds-counter');  function incrementSeconds() {
    seconds += 2;
    el.innerText = "Du har også spart " + seconds + " kroner.";
  }
  var cancel = setInterval(incrementSeconds, 1000);
</script>
<div id="seconds-counter-kalorier"> </div>
<script>
  var seconds = 1;
  var el = document.getElementById('seconds-counter');  function incrementSeconds() {
    seconds += 0.5;
    el.innerText = "Du har også spart " + seconds + " kalorier.";
  }
  var cancel = setInterval(incrementSeconds, 1000);
</script>

При этом вы избегаете переопределения.

Dionisio Ramirez Flores ответил: 12 мая 2018 в 03:53
Не забудьте изменить имя в документе.getElementById ('Имя вашего div').
Jonas W. ответил: 12 мая 2018 в 03:54

Возможно, вы захотите обернуть код в функцию для создания таймеров. Благодаря этому вы сокращаете свой код, и вы можете вложить переменные, чтобы вы получили разные значения для всех разных таймеров:

function createTimer(message, selector) {
  var seconds = 0;
  var el = document.getElementById(selector);  function incrementSeconds() {
     seconds += 1;
     el.innerText = message + seconds + " sekunder.";
   }   setInterval(incrementSeconds, 1000);
}

Итак, вы можете просто сделать:

createTimer("Du har vært sukkerfri ", "seconds-counter");
createTimer("Something else ", "seconds-counter2");

PS: Идентификаторы внутри DOM должны быть уникальными.