如何计算HTML页面的按钮数量？

我有一个HTML页面的源代码如下 -如何计算HTML页面的按钮数量？

<html> 
<script type="text/javascript"> 
function jsMeth() { 
     alert('Count of buttons : '+document.getElementsByTagName('button').length); 
} 
</script> 
<input type="button" value="button 1" id="btn1" name="btn1" /><br> 
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br> 
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/> 
</html>

我的基本目的是，当我点击有键ID“btn3”，它应该显示在我的HTML页面的按钮数量（本情况3）。但不知何故，它总是显示为0。

感谢您的快速回复。由于所有的你的建议，我已经修改我的代码如下 -

<html> 
<script type="text/javascript"> 
function jsMeth() { 
     alert('Count of buttons : '+document.querySelectorAll('[type=button]').length); 
} 
</script> 
<input type="button" value="button 1" id="btn1" name="btn1" /><br> 
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br> 
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/> 
</html>

但现在我得到下面的错误 -

Message: Object doesn't support this property or method 
Line: 4 
Char: 9 
Code: 0 
URI: file:///C:/Documents%20and%20Settings/556996/Desktop/demohtml.html

我在IE8测试。请帮忙！

感谢， Kartic

来源

2013-05-08 tik

所有这些元素的标签名称是'input'。 – 2013-05-08 19:36:32

是的布赖恩，我可以使用document.getElementByTagName（“输入”），然后检查类型按钮，但我想知道如果我可以不做所有这些东西的所有按钮元素。现在我怀疑这是没有选择的。是吗？ – tik 2013-05-09 19:27:11

使用这个.. 。

function jsMeth() { 
     alert('Count of buttons : '+document.querySelectorAll('[type=button]').length); 
}

或者对于旧浏览器

function jsMeth() { 
    var elem = document.getElementsByTagName('input'); 
    var numBts = 0; 
    for(i = 0; i < elem.length; i++){ 
     if(elem[i].getAttribute('type') === 'button'){ 
      numBts+=1; 
     } 
    } 
    alert(numBts); 
}

DEMO

来源

2013-05-08 19:41:30

嗨MG_Bautista，感谢您的回复。正如我已经发布，使用document.querySelectorAll（'[type = button]'）。长度我越来越javascript错误。此外，它不适用于较旧版本的IE（IE7及更早版本）。你可以请任何其他解决方案。 – tik 2013-05-09 11:12:22

@Kartic我的朋友，再次看到aswer ...演示更新 – 2013-05-09 13:35:36

这很酷。我已经试过了。但我必须说，就我所尝试的情况而言，这是最好的解决方案。谢谢++你 – tik 2013-05-09 19:34:31

尝试使用任一

document.getElementsByTagName('input')

或更具体的

document.querySelectorAll('[type=button'])

来源

2013-05-08 19:38:03

你面临的问题是，你不必与任何元素标签名称button。所有按钮的标签名称为input。

如果你不支持IE7，你可以使用querySelectorAll获得这些元素：

document.querySelectorAll('input[type=button]')

或者你可以改变你的HTML使用<button>元素：

<button type="button" value="button 1" id="btn1" name="btn1">button 1</button>

来源

2013-05-08 19:39:59

如何计算HTML页面的按钮数量？

回答

相关问题