Question

<p>Success login. You will be redirected in <span class="counter">10</span> second(s).</p>
<p>Wrong username/password. You will be redirected in <span class="counter">10</span> second(s).</p>

<script type="text/javascript">
function countdown() {
    var i = document.getElementByClassName('counter');
    if (parseInt(i.innerHTML)<=0) {
        location.href = 'login.php';
    }
    i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
</script>

在id=counter之前，它适用于一个span标记。但我希望两个标签共享相同的功能。我尝试将其更改为getElementByClassName，但它不起作用。谁能告诉我为什么？

Answer 1

document.getElementsByClassName('counter') 将返回一个数组。

＆＃39; getElements＆＃39; - 所以要定位该数组中的元素就像：

document.getElementsByClassName('counter')[0]

或循环播放：

var counters = document.getElementsByClassName('counter');
for(var i=0, len=counters.length; i<len; ++i) {
  counters[i].innerHTML = 'I am content ' +i;
}

编辑： - 注意＆＃39; getElement s ByClassName＆＃39; （多元素）正如其他人所指出的那样

Answer 2

没有函数getElementByClassName()，只有getElementsByClassName()（注意元素的复数* s *！）。这将返回一个NodeList，然后您必须遍历它：

function countdown() {
    var i = document.getElementsByClassName('counter');
    for( var j=0; j<i.length; j++ ) {
      if (parseInt(i[j].innerHTML)<=0) {
          location.href = 'login.php';
      }
      i[j].innerHTML = parseInt(i[j].innerHTML)-1;
    }
}
setInterval( countdown,1000);

PS：在setInterval()中你不需要函数表达式 - 只需给它一个函数本身的引用（不调用它！）。

Answer 3

Javascript中没有getElementByClassName();。您应该使用getElementsByTagName();

或者，使用jQuery选择器$('.counter');（需要jQuery库）。

有关详细信息，请查看[this][1]。

如何在php中调用具有相同div名称的脚本函数？

3 个答案: