JavaScript: класс вместо идентификатора

Question

Мне нужно больше, чем один час. В моей попытке я заменил document.getElementById на Document.getElementsByClassName. К сожалению, это не работает так, как я пытался. Может кто-нибудь помочь мне, пожалуйста?

function currentTime() {
        
    var date = new Date();
    var hour = date.getHours();
    var min = date.getMinutes();
    var midday = "AM";
    midday = (hour >= 12) ? "PM" : "AM";
    hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
    hour = updateTime(hour);
    min = updateTime(min);
    
    let hours = document.createElement('span')
    let points = document.createElement('span')
    let mins = document.createElement('span')
    let blank = document.createElement('span')
    let middays = document.createElement('span')
    
    hours.innerHTML = hour
    points.innerHTML = ":"
    mins.innerHTML = min
    blank.innerHTML = " "
    middays.innerHTML = midday
    
    document.getElementById("clock").innerHTML = ""
    document.getElementById("clock").appendChild(hours);
    document.getElementById("clock").appendChild(points);
    document.getElementById("clock").appendChild(mins);
    document.getElementById("clock").appendChild(blank);
    document.getElementById("clock").appendChild(middays);
    
    var t = setTimeout(currentTime, 1000);
    }
    function updateTime(k) {
    if (k < 10) {
    return "0" + k;
    }
    else {
    return k;
    }
    }
    currentTime();

<p id="clock"></p>

Answer 1

const clocks = document.querySelectorAll('.clock');

function currentTime() {
        
  var date = new Date();
  var hour = date.getHours();
  var min = date.getMinutes();
  var midday = "AM";
  midday = (hour >= 12) ? "PM" : "AM";
  hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
  hour = updateTime(hour);
  min = updateTime(min);
  
  const clock = `${hour}:${min} ${midday}`

  for (var i = 0; i < clocks.length; i++) {
    clocks[i].innerHTML = clock;
  }
  
  var t = setTimeout(currentTime, 1000);
  }
  function updateTime(k) {
    if (k < 10) {

         return "0" + k;
    }
    else {

         return k;
    }

  }

  currentTime();

<p class="clock"></p>
<p class="clock"></p>
<p class="clock"></p>

Answer 2

вы не можете иметь несколько идентификаторов на одной странице, поэтому вам нужно заменить их классом и выбрать все из них document.querySelectorAll (". Class-name"), после чего вы можете зациклить его.

Answer 3

Я сделал это, ожидайте, что это было о вашем вопросе?

function currentTime(elementsClass)
{
  let AllClock = document.getElementsByClassName(elementsClass)
    , theClock = AllClock[0]
    , hours    = document.createElement('span')
    , points   = document.createElement('span')
    , mins     = document.createElement('span')
    , blank    = document.createElement('span')
    , middays  = document.createElement('span')
    , date     = null
    , hour     = null
    , theClockInnerHTML = ''
    ;
  theClock.appendChild(hours);
  theClock.appendChild(points);
  theClock.appendChild(mins);
  theClock.appendChild(blank);
  theClock.appendChild(middays);

  points.textContent  = ":"
  blank.textContent   = " "

  updateClock()

  setInterval(updateClock, 1000);

  function updateClock()
  {
    date   = new Date()
    hour   = date.getHours()
    hours.textContent   = time2digits( (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour)  )
    mins.textContent    = time2digits( date.getMinutes())
    middays.textContent = (hour >= 12) ? "PM" : "AM"

    if (theClock.innerHTML!=theClockInnerHTML) {
      theClockInnerHTML = theClock.innerHTML
      for(let i=1;i<AllClock.length;i++) {
        AllClock[i].innerHTML = theClockInnerHTML
      }
    }
  }
  function time2digits(k)
  {
    return (k < 10) ? ("0" + k) : k
  }
}


currentTime('clock');

<p class="clock"></p>
<p class="clock"></p>
<p class="clock"></p>

Answer 4

Используя getElementsByClassName(), если вы читаете функцию, элементы множественного числа. Функция getElementsByClassName() фактически возвращает массив! Итак, вам просто нужно использовать: document.getElementsByClassName('class')[index].

Надеюсь, вы понимаете, как работают массивы. Если нет, то здесь MDN и w3schools . Я рекомендую сначала прочитать w3schools , а затем посмотреть MDN