Question

我有一个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

Answer 1

尝试使用

之一

document.getElementsByTagName('input')

或更具体的

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

Answer 2

您遇到的问题是您没有标记名为button的任何元素。您的所有按钮都有标记名input。

如果您不支持IE7，可以使用querySelectorAll来获取这些元素：

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

或者您可以更改HTML以使用<button>元素：

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

Answer 3

使用此...

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

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

3 个答案: