Javascript GetElementsByClass的问题&；GetElementByID

我正在倒计时

我需要在html中有同一项目的多个实例。 这是我的代码：

function test() {
//                                   (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020,05,28,11,00,0));

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
    var distance = countDownDate - now - (3600000 * 1);
    
    // 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);
    
    // Output the result in an element with id="demo"
    document.getElementsByClassName("test").innerHTML = days + "<span>d</span> " + hours + "<span>h</span> "
    + minutes + "<span>m</span> " + seconds + "<span>s</span><br />";
    
    
    // If the count down is over, write some text 
    if (distance < 0) {
        document.getElementsByClassName("test").innerHTML = "Live <i class='fa fa-circle faa-flash animated'></i>";
    }    
}, 1000);

功能测试（）{
//（AAAA，MM，DD，HH，MM，S））；
var countDownDate=新日期（UTC日期（2020,05,28,11,00,0））；
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
//函数结束时的GMT/UTC调整。0=GMT/UTC+0；1=GMT/UTC+1。
var距离=倒计时日期-现在-（3600000*1）；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//在id=“demo”的元素中输出结果
document.getElementsByClassName（“test”）.innerHTML=days+“d”+hours+“h”
+分钟+米+秒+秒
；
//如果倒计时结束，写一些文字
如果（距离<0）{
document.getElementsByClassName（“test”）.innerHTML=“Live”；
}    
}, 1000);

}

---

问题是，当我使用：

document.getElementsByClassName（“test”）

时，我的html中没有任何内容，但如果我使用：

document.getElementByID（“test”）

则它确实有效。

---

但是我不需要使用id，因为我需要该元素在同一个html中多次出现

当我看到这个问题时，它提到使用getElementsByClassName不会得到任何东西，如果添加了类，我会想到这一点

我真的不知道为什么要放弃，这真的是一个基本的问题

这是工作小提琴：

---

document.getElementsByClassName应该可以工作，它将返回一个HTMLCollection。请检查HTML元素是否包含“test”类

document.getElementsByClassName('test')

---

如果您想使用className，那么您需要使用迭代

let items= document.getElementsByClassName("test");

for(let i = 0; i < items.length; i++) {
   items[i].innerHTML = `your innerHTML here`;
}

---

let items=document.getElementsByClassName（“测试”）；
for（设i=0；i

返回一个HTML集合，它类似于一个项目数组。您需要设置数组中每个元素的

innerHTML

。尝试：

document.getElementsByClassName('test').forEach(element => element.innerHTML = "Your Code Here")

---

document.getElementsByClassName

返回的

HTMLCollection

不是特定的元素，因此如果不先获取元素，就不能对其使用

innerHTML

。使用迭代循环遍历集合中的所有项

另外，由于

HTMLCollection

不支持简单的

forEach

，因此您可能需要使用

querySelectorAll

document.querySelectorAll('.test').forEach((element) => {element.innerHTML = "test"})

---

GetElementsByCassName返回一组html元素，这些元素的特定类名为数组。在您的例子中，它返回一个类名为test的对象集合

您应使用上述方法：

---

var元素=document.getElementsByClassName（“测试”）； 元素[0]。innerHTML=“您的内容”

---

它会成功的

方法以HTMLCollection对象的形式返回文档中具有指定类名的所有元素的集合

HTMLCollection对象表示节点的集合。可以通过索引号访问节点。索引从0开始

您可以通过使用查找类名为test的所有节点

---

Array.from（document.getElementsByClassName（“test”））

。请在下面查找代码

var domElements= Array.from(document.getElementsByClassName("test"));
/*For particular element*/
domElements[index].innerHTML="Your Content";
/*For all elements*/
domElements.map(element=>
{
    element.innerHTML="Your Content";
});

---

使用getElementById（“测试”）；方法名中有错误将元素ID更改为类？请给出否决的理由。这非常有效。谢谢你的邀请time@slowdmelendez360我应该在这条线上做同样的事吗<代码>//将结果输出到id=“demo”document.getElementsByClassName（“test”）.innerHTML=days+“d”+hours+“h”+minutes+“m”+seconds+“s
”的元素中${days}d${hours}h${minutes}m${seconds}s替换

此处的innerHTML

：只是提醒您不要忘记``document.getElementsByClassName（'test'）将返回一个HTMLCollection对象，该对象不包含forEach方法。

var domElements= Array.from(document.getElementsByClassName("test"));
/*For particular element*/
domElements[index].innerHTML="Your Content";
/*For all elements*/
domElements.map(element=>
{
    element.innerHTML="Your Content";
});