Я хочу создать программу обратного отсчета. Но моя проблема в том, что я не могу получить

 getElementsByClassName
  

для работы (на мой взгляд). ВСЯ программа будет работать, если я использую

 getElementById
  

и измените теги HTML на id=»»…

Весь мой код доступен здесь: https://jsfiddle.net/f1kzL78h/5 /

Мне нужна функция класса, потому что в будущем у меня будет больше p-тегов в моем HTML-файле, и я хочу применить Javascript ко всем моим классам с одинаковыми именами.

HTML:

 <p class="date">2019-04-13</p>
<p class="time">21:21</p>
<p class="appear"></p>
  

JS:

 var articleDate = document.getElementsByClassName("date");
var articleTime = document.getElementsByClassName("time");

var total = articleDate   'T'   articleTime   ':00';

var countDownTime = new Date(total).getTime();

var x = setInterval(function() {

    var timeNow = new Date().getTime();

    var difference = countDownTime - timeNow;

    var days = Math.floor(difference / (1000 * 60 * 60 * 24));
    var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((difference % (1000 * 60)) / 1000);

    res = days   ":"   hours   ":"   minutes   ":"   seconds;

     document.getElementsByClassName("appear") = res;

}, 1000);
  

Я ценю любую помощь, которую я могу получить.

Изменить на document.getElementsByClassName("appear")[0].innerHTML = res;

Также обновление для

 var articleDate = document.getElementsByClassName("date")[0].innerHTML;
var articleTime = document.getElementsByClassName("time")[0].innerHTML;
  

Потому document.getElementsByClassName("appear") что только элемент DOM и document.getElementsByClassName возвращаемый массив элементов нуждаются в innerHTML для получения значения.
https://jsfiddle.net/viethien/8mxh0zkr/3 /

Элементы по классам

document.getElementsByClassName("appear") возвращает коллекцию элементов. Вы можете повторить его с помощью следующего кода

 const appears = document.getElementsByClassName("appear");
for (var i = 0; i < appears.length; i  ) {
  appears.item(i).innerHTML = res;
}
  

Получение дат из HTML

Вы использовали var articleDate = document.getElementsByClassName("date"); который не возвращает ожидаемое значение

Вы должны использовать var articleDate = document.getElementsByClassName("date")[0].innerHTML; , чтобы получить значение внутри вашего элемента

Реализация в вашем случае

 // Fångar upp information om artiklens datum och tid

var articleDate = document.getElementsByClassName("date")[0].innerHTML;
var articleTime = document.getElementsByClassName("time")[0].innerHTML;

var total = articleDate   'T'   articleTime   ':00';

var countDownTime = new Date(total).getTime();

var x = setInterval(function() {

  var timeNow = new Date().getTime();

  var difference = countDownTime - timeNow;
  
  var days = Math.floor(difference / (1000 * 60 * 60 * 24));
  var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((difference % (1000 * 60)) / 1000);

  res = days   ":"   hours   ":"   minutes   ":"   seconds;

  const appears = document.getElementsByClassName("appear");
  for (var i = 0; i < appears.length; i  ) {
    appears.item(i).innerHTML = res;
  }

}, 1000);  

 <p class="date">2019-04-13</p>
<p class="time">21:21</p>
<p class="appear"></p>  

Измените код следующим образом. Используйте document.getElementsByClassName(«дата»)[0].textContent для получения значения.

 // Fångar upp information om artiklens datum och tid
var articleDate = document.getElementsByClassName("date")[0].textContent;
var articleTime = document.getElementsByClassName("time")[0].textContent;

var total = articleDate   'T'   articleTime   ':00';

var countDownTime = new Date(total).getTime();


var x = setInterval(function() {

  var timeNow = new Date().getTime();

  var difference = countDownTime - timeNow;
  
  var days = Math.floor(difference / (1000 * 60 * 60 * 24));
  var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((difference % (1000 * 60)) / 1000);
  
  res = days   ":"   hours   ":"   minutes   ":"   seconds;
  document.getElementsByClassName("appear")[0].textContent = res;

}, 1000);  

 <p class="date">2019-04-13</p>
<p class="time">21:21</p>
<p class="appear"></p>  

«Мне нужна функция класса, потому что в будущем у меня будет больше p-тегов в моем HTML-файле, и я хочу применить Javascript ко всем моим классам с одинаковыми именами».

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

 <p class="date">2019-04-13</p>
<p class="time">21:21</p>
<p class="appear"></p>

<p class="date">2019-04-13</p>
<p class="time">10:21</p>
<p class="appear"></p>

setInterval(function() {
  var articleElements = document.getElementsByClassName("date");
  for(var i = 0; i < articleElements.length; i  ) {
    var articleDate = articleElements[i].innerText;
    var articleTime = articleElements[i].nextElementSibling.innerText;
    var total = articleDate   'T'   articleTime   ':00';
    var countDownTime = new Date(total).getTime();

    var elAppear = articleElements[i].nextElementSibling.nextElementSibling;
    elAppear.setAttribute('data-countdown', countDownTime);

    var timeNow = new Date().getTime();
      var difference = countDownTime - timeNow;
      var days = Math.floor(difference / (1000 * 60 * 60 * 24));
      var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((difference % (1000 * 60)) / 1000);

      res = days   ":"   hours   ":"   minutes   ":"   seconds;
    elAppear.innerText = res;
  }
}, 1000);