1

我有一个 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 中测试。请帮忙！

谢谢，卡蒂克

4

3 回答 3

3

尝试使用任何一个

document.getElementsByTagName('input')

或更具体的

document.querySelectorAll('[type=button'])
于 2013-05-08T19:38:03.943 回答
2

您面临的问题是您没有任何带有标签 name 的元素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-08T19:39:59.677 回答
1

用这个...

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);
}

演示

于 2013-05-08T19:41:30.927 回答