JavaScript：类而不是ID

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

使用

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>

实际上返回一个数组！因此，您只需要使用：getElementsByClassName()。

希望您了解数组的工作原理。如果不是，则为getElementsByClassName()和document.getElementsByClassName('class')[index]。我建议先阅读MDN，然后再阅读w3schools

Answer 3

您在同一页面上不能有多个ID，因此您需要将其替换为一个类，然后使用document.querySelectorAll（“。class-name”）选择所有ID，然后可以在其上循环。

Answer 4

我这样做，希望是关于您的问题吗？

w3schools

MDN