时间戳

首页 > 解决方案 > by class name counter not work in javascript

javascript - by class name counter not work in javascript

问题描述

i create a counter.

dk = parseInt(document.querySelector('.dm').innerText);
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      document.querySelector('.dm').innerText = i;
    }, i * 100);
  })(i);
}
console.log(dk);
.counter { display: flex; }

.dm {
  background: tomato;
  padding: 15px;
  font-size: 5em;
  font-weight: 700;
  width: 100px;
  height: auto;
  text-align: center;
  margin: 0 2px;
}
<div class="counter">
  <div class="dm">40</div>
  <div class="dm">30</div>
</div>

problem is only first div counter is working. can we parse element of innerHTMl by html dom like classname...i try but result is Nan. i want run all counter if i add same classname with different inner values.

标签： javascripthtmlcssloopsdom

解决方案

您的问题是您正在使用document.querySelector().

当你使用document.querySelector('.dm')它时，它只会返回匹配这个选择器的第一个元素，你需要使用它document.querySelectorAll('.dm')来获取所有匹配的元素。

但是对于多个元素，您将需要一个循环来执行此操作，因为querySelectorAll()将返回nodeList一个集合（array）。

这应该是你的代码：

var elements = document.querySelectorAll('.dm');
Array.from(elements).forEach(function(el, ind){
let dk = parseInt(elements[ind].innerText)
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      elements[ind].innerText = i;
    }, i * 100);
  })(i);
}
});

演示：

var elements = document.querySelectorAll('.dm');
Array.from(elements).forEach(function(el, ind){
let dk = parseInt(elements[ind].innerText)
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      elements[ind].innerText = i;
    }, i * 100);
  })(i);
}
});
.counter { display: flex; }

.dm {
  background: tomato;
  padding: 15px;
  font-size: 5em;
  font-weight: 700;
  width: 100px;
  height: auto;
  text-align: center;
  margin: 0 2px;
}
<div class="counter">
  <div class="dm">40</div>
  <div class="dm">30</div>
</div>

推荐阅读